CSS中的min-height属性

CSS中的min-height属性可以设置一个元素的最小高度。当元素的内容没有占满整个元素时，min-height属性就能发挥作用，它把该元素的高度设置成内容占据的最小高度，而不是设定的固定高度。

一、基本用法

min-height属性可以用于内联元素、块状元素、表格单元格、其他一些类型的元素上。它的基本语法如下：

selector {  
    min-height: value;  
}  

其中，selector是你要选择的元素，value是你要为min-height属性设置的值。常见的min-height值有px、em、rem、百分比等。

下面是一个简单的例子，以控制一个div元素的min-height属性：

div {  
    min-height: 100px;  
}  

在上面的代码中，我们给div元素设置了min-height属性的值为100px，这意味着如果div元素的内容高度小于100px，该元素的高度将设置为100px，如果内容高度大于100px，则元素的高度将自动调整以适应其内容的高度。

二、min-height与height属性的区别

虽然min-height和height属性都可以设置元素的高度，但两者在一些方面上有所不同：

1. height属性设置的是固定高度，而min-height属性设置的是最小高度。
2. 当元素的内容高度大于height属性设定的值时，height属性不会随内容高度的变化而变化，而min-height属性会自适应内容高度的变化。

下面的示例演示了min-height和height属性之间的区别：

div.height {  
    height: 100px;  
}  
div.min-height {  
    min-height: 100px;  
}  

在上述代码中，当div的内容高度小于100px时，height属性和min-height属性的效果是一样的。但是，如果div的内容高度大于100px时，height属性扔会是100px，而min-height属性会随内容高度的变化而自动调整。

三、使用min-height属性解决浮动元素引起的高度塌陷

如果一个元素里面带有浮动元素，那么该元素的高度将塌陷。在这种情况下，可以使用min-height属性设置最小高度来避免高度塌陷：

.clearfix:after {  
    display: block;  
    content: "";  
    clear: both;  
}  
.container {  
    min-height: 200px;  
    border: 1px solid #ccc;  
}  
.container .column {  
    float: left;  
    width: 50%;  
}  

在上述代码中，我们使用了一个clearfix类，它包含在一个container容器中。由于container中有两个column块级元素被浮动了，不设置min-height的话，container容器将会塌陷。通过设置.container元素的min-height为200px，就可以避免这种高度塌陷的问题。

四、结语

通过min-height属性，我们可以设置一个元素的最小高度，并在该元素的内容高度小于设定的最小高度时自适应高度。同时，我们也可以通过min-height属性来解决高度不定的元素中浮动元素造成的高度塌陷问题。