Question

我已经看到这个简单问题的版本在网上和其他地方引发了十几次，但我还没有看到一个对我有用的解决方案，所以我再次问它。

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

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

对于奖励积分，将可变高度页脚固定在页面底部。

Answer 1

除非您知道两个容器有多大，否则无法单独使用CSS / table。

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

可变高度标题，可滚动内容区域填充剩余视口区域

1 个答案: