1

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

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

我试过了：

  • 在 CSS中设置bodyandhtml的高度。100%
  • content在 CSS中设置的高度100%，但这使得content填充窗口。
  • height:auto 0像在 CSS 中一样设置页脚样式。

...但这些都没有奏效。

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

先感谢您。

4

1 回答 1

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>
于 2012-09-05T15:54:49.180 回答