?

今天在群里（54430674）交流高度自適應問題，linxz℡推薦使用：

height:auot;min-height:100px !important;

或

height:auto;overflow:hidden;zoom:1;

這是一個有意思的話題，特別第2種方法給人很多想象的空間。例如：

<style type="text/css">
#div1 {
??? height:auto;
??? border:solid 1px red;
??? zoom:1;
}
#div2 {
??? float:left;
??? height:100px;
??? width:100px;
??? background:blue;
}
</style>
<div id="div1">
??? <div id="div2"></div>
</div>

在上面示例中，外包含框在非IE中是不能夠子適應高度的，但是增加了聲明overflow:hidden;，即：

<style type="text/css">
#div1 {
??? height:auto;
??? border:solid 1px red;
??? zoom:1;
??? overflow:hidden;
}
#div2 {
??? float:left;
??? height:100px;
??? width:100px;
??? background:blue;
}
</style>
<div id="div1">
??? <div id="div2"></div>
</div>

你會發現包含框在非IE中也能夠自動適應包含元素的高度，很奇怪的現象。

我們知道overflow屬性設置當元素的內容溢出其區域時發生的事情。這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。而hidden正相反，會自動剪切多出的內容。

現在就有一個問題了：

應該說，外包含框高度為0，那么它應該剪切所有的內容，即不顯示任何內容。但是試驗的結果卻相反。這不得不讓人思考其他問題：為什么呢？

考慮這個問題，我們應該從瀏覽器的解析機制開始，首先，瀏覽器遵循從上到下、從內到外的順序來解析HTML結構，然后再解析這些結構的CSS樣式。

而CSS屬性的解析也是有順序的，一般會遵循先主后次的順序，也就是說overflow屬性晚于其他屬性進行解析，當瀏覽器解析完<div id="div1">的樣式時，它會按著一定的邏輯不斷進行計算。當解析overflow屬性，它要完成幾個計算問題：第一，元素本身是否定義了高度，第二，元素的布局模式，第三，包含子元素的大小。如果當元素沒有明確定義高度的情況下，而布局又是以流動布局顯示，此時它會考慮子元素的高度。也就是說，此時overflow:hidden聲明觸發了瀏覽器重新計算包含框的高度的可能性，此時它會考慮到子元素的高度，并努力包含子元素，避免子元素被裁切顯示。因此，我們會看到了使用overflow:hidden聲明之后，包含框能夠自適應包含內部的子元素。

實際上，這是兩種邏輯計算的重合所引發的一個有趣話題。

這是樣吧的個人思考，并不代表權威解釋，留待更多感興趣的讀者去思考和探索。

總結

以上是生活随笔為你收集整理的overflowhidden用法思考的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。