页面填充窗口，内容填充空白答案

【问题标题】：Page fills window with content filling the gap页面填充窗口，内容填充空白
【发布时间】：2012-08-30 08:34:29
【问题描述】：

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

但是，这就是问题所在。我想在博客上保留滚动条（以便用户可以滚动浏览它），但我希望页面完全填满窗口，因此页眉和页脚占用所需的最小空间。页眉很好，但页脚有问题。

我试过了：

在 CSS 中将 body 和 html 的高度设置为 100%。
在 CSS 中将content 的高度设置为100%，但这会使content 填满整个窗口。
在 CSS 中将页脚样式设置为 height:auto 0。

...但这些都不起作用。

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

提前谢谢你。

【问题讨论】：

标签： html iframe height footer

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

【讨论】：