Html5標準下的footer置底的問題，為何min-height會失效？

01-11

&& & & & & #wapper{ position: relative; height: auto; min-height: 100%; background: #F00; border: 1px solid #F00; } #footer{ position: absolute; bottom: 0; left:0; height: 60px; background: #0F0; border: 1px solid #0F0; width: 100%; } #main-content{ padding-bottom: 60px; background: #00F; border: 1px solid #00F; } & & & & & blue main & & footer green & &
& &

謝邀。

要解釋清楚為什麼，我們首先要搞清楚 min-height 這個屬性的 百分比值 到底是什麼含義？

參考 MDN min-height - CSS 中對其的描述：

Percentages：The percentage is calculated with respect to the height of the generated box"s containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.

可以發現：

百分比的計算後值與其 Containing Block 有關，如果其 Containing Block 的高度沒有被顯式聲明，並且這個元素本身不是絕對定位的，那麼其百分比值將被作為 0 處理。

那麼什麼是 Containing Block 呢？

簡單的說：對於 position 為 static/relative 的元素，Containing Block 為最接近的祖先塊級元素的內容區域。

For other elements, if the element"s position is "relative" or "static", the containing block is formed by the content edge of the nearest block container ancestor box.

（詳細的描述，可以參見http://W3.org：Visual formatting model details）

所以對於此題：

在聲明了Html5標準的情況下，瀏覽器的表現「當然是對的」

由於 #wrapper 元素為 relative ，其 min-height 相當於無效，所以被其包含的內容撐開，高度不為題主預期的 100%

而對於去掉 & 聲明的情況，猜測是開啟了瀏覽器的 BackCompat 向後兼容模式（怪異模式），由於本人接觸前端時 IE6 已經死得差不多了……對其沒有了解，所以也不知道為什麼會出現符合題主預期的行為。

-----------------

那麼，如果要在標準模式下實現題主想要的高度100%效果該怎麼做呢？

1. 給 #wrapper 的 position 屬性改為 absolute

2. 給 & 和 & 都加上 height : 100% ，相當於直接找根元素（initial containing block）

3. 懶得想了，求繼續補充

以上。

解決辦法：只有將包含你想要達到100% height的元素的所有父元素的height屬性都設為100%時，原先的該屬性才會生效。否則，子元素的height屬性將從100%變為auto（inherit?)。

按題主給的例子，只需新增如下設置即可解決問題而不必刪去類型聲明：

& &

css:

#holy { height: 100%; } #shit { height: 100%; }

參考：

css - Why can"t I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height

html - Why certain DOCTYPE declarations cause 100%-height tables and divs to stop working?

樓上幾位都說的好高大上，讓人看得雲里霧裡，其實道理很簡單，百分比值都是相對值。你所有的父級層都沒設高度值；0乘100%當然還是0了。別指望他會自動撐高 min-height 對於為0的值解析都是auto屬性，這是標準。