[分享]css中最小高度不管用

在CSS中，最小高度是非常重要的一个属性，它可以使元素保持至少一定的高度。但有时候你会发现，设置了最小高度却不起作用。这种情况下，往往需要进行一些排查。首先，检查元素是否有规定固定的高度或是高度为0，...

在CSS中，最小高度是非常重要的一个属性，它可以使元素保持至少一定的高度。但有时候你会发现，设置了最小高度却不起作用。这种情况下，往往需要进行一些排查。

首先，检查元素是否有规定固定的高度或是高度为0，如果是，则最小高度不会生效。

div {
  height: 200px;
  min-height: 100px; /* 这里的最小高度不会生效 */
} 

其次，必须使用正确的单位。最小高度应使用像素、em、rem或vh等绝对或相对单位。百分比单位则不一定起作用，除非父元素定义了高度。

div {
  min-height: 50%; /* 这里的最小高度不会生效 */
}

div {
  height: 400px;
}

div p {
  min-height: 50%; /* 这里的最小高度生效了，因为父元素有定义高度 */
} 

另外，最小高度还需要注意元素的盒模型。如果元素设置了padding或border，则最小高度应该考虑它们的高度。

div {
  height: 100px;
  padding: 20px;
  min-height: 80px; /* 考虑了padding后必须设置成80px才有效果 */
} 

在排查了这些可能原因后，最小高度还是不起作用，那么可以考虑使用min-height的替代方案：使用overflow:hidden或clearfix技术，以保证元素的高度不会被内容撑出去。

div {
  overflow: hidden; /* 元素高度会被内容收缩，从而达到最小高度的效果 */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
} 

总之，最小高度不生效可能是由于多种原因造成的，仔细排查并使用替代方案可以解决这个问题。