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

时间:2010-04-30 16:49:52

标签: css tablelayout scrollable

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

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

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

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

1 个答案:

答案 0 :(得分:0)

除非您知道两个容器有多大,否则无法单独使用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>