使用100％高度的div遇到問題

我遇到了CSS 100％高度的奇怪問題。我的網站的網站如下：使用100％高度的div遇到問題

<html> 
    <body> 
    <div id="container"> 
     <div id="header"></div> 
     <div id="content"></div> 
    </div> 
    </body> 
</html>

我試圖讓容器具有100％的最低高度，所以我的CSS如下：

html { min-height: 100%; } 
body { height: 100%; } 
#container { height: 100%; }

的問題是，#container做未填充高度的100％，並且只根據#header和#content中的內容有多少進行擴展，並且如果#header和#content爲空或已刪除，則#container根本不會展開。

我覺得我必須俯視一些非常簡單的東西，但一直在看這個，並且已經死了！有人能指出這個問題嗎？

百分比高地：設置一個百分比高度#container，它的父元素必須有一個特定的高度。在這種情況下，您想要的特定效果可以使用height:100%或min-height:100%來完成。要實現其中任何一個，每個#container的祖先必須具有100％的高度或最小高度。

html, body, #container { 
    height: 100%; 
}

html, body, #container { 
    min-height: 100%; 
}

使用min-height與height：在你的問題的範圍狹窄，它們將具有同樣的效果。但在具有高度和最小高度的頁面上：

如果指定了最大高度（例如#container { max-height: 50px }），這將推翻高度。但是，最大高度不能取代最小高度。 Read more at this link。

2013-01-16 20:52:31 JSW189

HockeyRef45也希望'＃容器'的最小高度爲100％，這樣它就會隨其內容一起擴展。 – Neil

@尼爾：編輯我的答案來解決這個問題。 – JSW189

回答