可變高度標題與可滾動內容區域填充剩餘視區

Question

我見過這個簡單問題的版本在這裏和其他地方在網絡上引發了十幾次，但我還沒有看到一個解決方案，適合我，所以我'再問一遍。

我想要一個可變高度全寬頁眉（基於內容的高度）的網頁。在這之下，我想要一個填充瀏覽器視口其餘部分的內容區域。如果內容大於視口中的剩餘空間，那麼我希望內容區域滾動。

我不需要這個在IE6上工作。我不在乎解決方案是使用CSS，表格還是兩者的混合體，只是沒有框架，也沒有Javascript。

對於獎勵積分將可變高度頁腳固定到頁面底部。

Answer 1

這不能單獨使用CSS/tables來完成，除非你知道你的兩個容器提前有多大。

如果你願意使用一點點的JavaScript，這將完美的工作。

<style> 
body, html 
{ 
    padding:0; 
    margin:0; 
    height:100%; 
    width:100%; 
} 
section, header 
{ 
    width:100%; 
    display:block; 
} 
section 
{ 
    background:red; 
} 
</style> 
<script> 
window.onload = window.onresize = function() 
{ 
    document.getElementById("section").style.height = document.body.offsetHeight - document.getElementById("head").offsetHeight + "px"; 
} 
</script> 
<header id="head"> 
header 
<br /> 
two 
</header> 
<section id="section"> 
scroll the rest 
</section>