页面填写窗口内容填补空白(Page fills window with content fillin

我目前在建立一个网站http://grapevineiow.org/m_inspireblog.html 。这个网站有一个页眉和页脚。我已链接到网页上面设有在博客中iframe 。显然，博客是远远太长到页面作为一个连续的一段内容，所以需要滚动条。

然而，这是哪里有问题。我想继续在博客上（因此用户可以通过它滚动）滚动条，但我希望页面恰好填满窗口，所以页眉和页脚占用所需的最小空间。头是好的，但页脚是一个问题。

我努力了：

的高度设置body和html ，以100%的CSS。
设置的高度content ，以100%的CSS，但取得的content填满窗口。
造型页脚的height:auto 0中的CSS。

......但这些都没有工作。

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

先感谢您。

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

<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>