页面用填补空白的内容填充窗口

Question

我目前正在http://grapevineiow.org/m_inspireblog.html.这个网站有页眉和页脚。我链接到上面的页面有一个iframe中的博客。显然，博客太长了，无法作为一个连续的内容放入页面中，因此需要滚动条。

然而，这就是问题所在。我想保留博客上的滚动条（这样用户就可以滚动浏览），但我希望页面能准确地填满窗口，这样页眉和页脚就可以占用所需的最小空间。页眉不错，但是页脚有问题。

我试过：

• 在CSS中将body和html的高度设置为100%
• 在CSS中将content的高度设置为100%，但这使得content填充了窗口
• 在CSS中将页脚设置为height:auto 0

但这些都没有奏效。

如果可能的话，我希望能够只使用CSS来解决这个问题，但如果需要，我愿意使用HTML。我想避免使用Javascript。

提前谢谢。

Answer 1

如果你知道页眉和页脚的高度，你可以通过在中间区域设置顶部和底部来实现这一点，如下所示：

<style type="text/css">
html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#header{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100px;
    background: #f09;
}
#content{
    position: absolute;
    width: 100%;
    top: 100px;
    bottom: 100px;
    background: #f90;
}
#content iframe{
    width: 100%;
    height: 100%;
}
#footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: #90f;
}
</style>
<div id="header"></div>
<div id="content">
    <iframe src="http://en.wikipedia.org/wiki/Butterfly"></iframe>
</div>
<div id="footer"></div>