讓底部的div填充頁面

Question

的其餘部分，我有以下結構： image http://images.devs-on.net/Image/4eludampmz3Ylfm6-Bereich.png

我不知道頭部的高度，但我想第二個容器，填補了高度的其餘部分。

我發現一些解決方案，當我現在的頭大小，但我沒有。我希望上部容器適合其內容，而第二個容器正在填充窗口的其餘部分。

如何解決這個問題？

Answer 1

做到這一點，您可以使用JavaScript/jQuery的

var topDivHeight = $("#topdiv").height(), 
totalHeight = $(document).height(); 
$('#bottomDiv').height(totalHeight - topDivHeight); 

Answer 2

您可以通過

position:absolute; 
height:100% !important; 

Answer 3

是不是真的有純CSS這樣做的很好的，跨瀏覽器的方式。你最好的選擇是使用jQuery/javascript來調整div的高度來填充屏幕。假設你的頂部div的高度爲200px：

$("#bottom_div").css({ 
    minHeight: (($(window).height()) - 200) + 'px' 
}) 

你也需要在調整屏幕大小時調用它。

Answer 4

改編自：div with dynamic min-height based on browser window height並且不依賴於javascript。

HTML：

<div id="header"> 
    Place your header information here. 
</div> 
<div id="content"> 
    Place your content here. 
</div> 

CSS：

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
#content { 
    min-height: 100%; 
    height: auto !important /*min-height hack*/ 
    height: 100%;   /*min-height hack*/ 
    background-color: red; 
}​ 

的jsfiddle測試：http://jsfiddle.net/7SP9U/

Answer 5

爲此，您可以使用顯示：表屬性這一點，但它的工作，直到上述IE8 & 。像這樣寫：

<div class="container"> 
    <div class="header">header</div> 
    <div class="content">content</div> 
</div> 

CSS

.container{ 
    display:table; 
    height:800px; 
    width:100%; 
} 
.container > div{ 
    display:table-row; 
} 
.header{background:red; height:10%;} 

.content{background:blue} 

入住這http://jsfiddle.net/Rvbk4/2/

Answer 6

這裏有一個唯一的CSS的解決方案，將僅在IE8的工作，由於使用的display: table。

容器必須採取全高度，絕對定位並採取display: table。它的孩子需要display: table-row（如果你想要在這個級別以下的任何體面的樣式，你應該真的用display: table-cell包裝進一步包裝的內容，但我省略了這一點，以示例清楚）。

默認情況下，行將佔用父級的相等分數高度，但您可以通過設置height: 0（或任何其他高度）使它們縮小以適合其內容。

希望這有助於：

http://jsfiddle.net/barney/nXWbL/