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>

页面填充窗口，内容填补空白

1 个答案: