內部DIV沒有擴大到100％高度

Question

我有幾頁似乎會導致一些衝突的結果。我有一個應該有灰色背景的登錄頁面，然後我的內頁有白色背景。 但id =「loginPage」的div不能拉伸「容器」div的整個高度。因此，loginPage div是灰色的，但容器div的剩餘空間仍然是白色。

現在，主容器有一個最小高度，因爲我有一個包含大量內容的幾頁。當我將其設置爲只有高度：100％時，頁腳不在頁面的底部。但是一旦我將它設置爲最小高度，它就會下降到頁面底部。

這裏是我的CSS：

html, body { height: 100%;} 

#loginPage { 
    width:100%; 
    height:100%; 
    float:left; 
    background-color:#F7F7F9!important; 
} 
    #container 
{ 
    min-height:95%; 
    position: relative; 
    background:white; 
} 
.footerBg 
{ 
    width:100%; 
    padding-top:10px; 
    margin:0; 
    position:relative; 
} 

和HTML：

<div id="container"> 
<div class="topHeader_login"> 
<form method="post" action="/"> 
<div id="loginPage"> 
<div id="login_content"> 
<div id="login"> 
<div id="info"> 
<div style="text-align:center; padding-top:15px; float:left;"> </div> 
</div> 
</div> 
</form> 
</div> 
<div class="footerBg"> 

Answer 1

我想你可能想看看這個： http://ryanfait.com/sticky-footer/

它解釋瞭如何將頁腳始終保留在頁面底部，即使內容較小，並且如果它們不是祕密的，它就不會添加滾動條。然後，您可以將「灰色」背景顏色添加到頁面包裝器中。

Answer 2

如果你想設置的高度在網頁上的一個百分比，你 必須設置高度你想要定義的高度的每個父元素的高度。

來源：http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

嘗試給form { height: 100% }

看看這個fiddle，我清理你的HTML和CSS