固定高度的div容器，高度靈活的div內容

我有一個HTML代碼：固定高度的div容器，高度靈活的div內容

<div id="container"> 
<div id="header"> 
</div> 
<div id="content"> 
</div> 
<div id="footer"> 
</div>

＃DIV容器的高度是固定的（例如800像素）。 div＃footer和div＃頭部的大小在開始時是未知的（通過Javascript設置）。

我希望div＃內容佔用剩餘高度的100％。

可以使用CSS來完成嗎？

來源

2012-09-25 Jack

對於這種功能您可以使用顯示：表爲此。像這樣寫：

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

.content{background:blue} 

.footer{background:green; height:100px;}

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

注：這是工作，直到上述IE8 &。

來源

2012-09-25 08:57:32 sandeep

使用這些CSS規則，是否有辦法將頁眉和頁腳的高度設置爲等於它們的內容，而不是某些特定的像素值（您在此設置爲100px）？如果我刪除高度：100像素，它們的高度將大於其內容的高度。謝謝。 – Jack

既然你不能設置頁腳高度（爲你寫）
試試這個：

#container{ 
    background : red; 
    height:800px; 
    min-height:800px 
} 
#header{ 
    background : blue; 
} 
#content{ 
    background : yellow; 
    height:100% 
} 
#footer{ 
    background : green; 
    //position:absolute; 
    position:fixed; 
    bottom:0; 
    width:100%; 
}

和的jsfiddle：http://jsfiddle.net/AJtxy/1/

來源

2012-09-25 09:13:24 Izack

如果要設置使用javascript其他的div的高度，你可以使用jquery來獲得窗口的高度，減去其他2個div的高度，並且瞧，你剩下正確的數量... 這應該有助於給你一個想法 http://api.jquery.com/height/

來源

2012-09-25 09:14:24 ikoderuk

固定高度的div容器，高度靈活的div內容

回答

相關問題