css - 具有可滚动内容区域的可变高度标题填充剩余视口区域

Question

我已经看到这个简单问题的版本在这里和网络上的其他地方提出了十几次，但我还没有看到适合我的解决方案，所以我再次询问。

我想要一个具有可变高度全宽标题（高度基于内容）的网页。在此之下，我想要一个填充浏览器视口其余部分的内容区域。如果内容大于视口中的剩余空间，那么我希望内容区域滚动。

我不需要这个在 IE6 上工作。我不在乎解决方案是使用 CSS、表格还是两者的混合，只是没有框架和 Javascript。

对于奖励点，将可变高度页脚固定到页面底部。

Answer 1

除非你提前知道你的两个容器有多大，否则这不能单独使用 CSS/表来完成。

如果您愿意使用一点 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>