CSS：在固定高度或寬度的條件下填充空白處

該解決方案不需要所有瀏覽器都支持。CSS：在固定高度或寬度的條件下填充空白處

<div id="page"> 
    <div id="header">&nbsp;</div> 
    <div id="content">&nbsp;</div> 
    <div id="footer">&nbsp;</div> 
</div>

讓我們來看看。頁面得到width:100%;height:100%。標題和內容得到了width:100%（這是否需要？），但他們得到了固定的高度，比如height: 200px和height: 500px。現在我想讓頁腳填充頁面的其餘部分。

任何解決方案？

感謝您的幫助。

來源

2011-02-17 Calvin

安置自己的CSS，請:) – Kyle 2011-02-17 11:05:17

你可以使用這樣的事情：

html,body,#page {height:100%} 
#page {position:relative;} 
#header {height:200px;background:green;} 
#content {height:500px;background:grey;} 
#footer {position:absolute;top:700px;bottom:0;background:red;width:100%;}

其實你設置position:absolute爲#footer，並給予top 700像素的值; #header和#content和bottom:0的總高度將填滿空白區域。

演示：http://jsbin.com/icuza3/2

來源

2011-02-17 11:10:33 Sotiris

非常感謝！但是你的第一行產生了一個垂直滾動條。所以我只是刪除它。 – Calvin 2011-02-17 12:05:13

據我所知CSS3可以做「數學」 ADN簡單的功能看到w3c-specifications，搜索「計算」;）

來源

2011-02-17 11:18:28 fbtb

CSS：在固定高度或寬度的條件下填充空白處

回答

相關問題