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屬性來解決高度不定的元素中浮動元素造成的高度塌陷問題。