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

【问题标题】：Variable height header with scrollable content area filling remaining viewport area具有可滚动内容区域的可变高度标题填充剩余视口区域
【发布时间】：2011-02-14 07:55:15
【问题描述】：

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

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

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

为获得奖励点，将可变高度页脚固定到页面底部。

【问题讨论】：

标签： css tablelayout scrollable

【解决方案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>

【讨论】：