是否可以限制/调整浏览器页面的滚动高度？

Question

我的csspp library and tool 有一个使用固定页眉和页脚的页面。当浏览器宽度至少为 1,​​300 像素时，这些是固定的。

我遇到的问题是，当这些对象被固定时，它会改变用户可以看到的区域的大小。但是，当您使用 Page Up 和 Page Down 时，不会考虑这些固定对象（至少默认情况下不会）。换句话说，当您执行 Page Down 时，浏览器不会在可见区域看到下一页，而是向下滚动 一整页。我希望能够告诉浏览器滚动可见数据的高度（即下图中箭头的长度）。 Page Up 也有同样的问题。如果您从页面底部开始向上翻一页，您将丢失大约等于页眉 + 页脚高度的数据。

我的问题是：是否可以使用 CSS 3 和/或 HTML 5 来解决此滚动高度问题？

我已经看到在各种网站上工作，例如wired.com（他们有一个固定的标题），但他们使用了大量的 JavaScript，所以我认为他们破解了 JavaScript 中的滚动......

Answer 1

是的！

<div class="header">
</div>
<div class="content">
...
</div>
<div class="footer">
</div>

和

.header {
    height: 35px;
}
.content {
    overflow-y: scroll;
    position: absolute;
    top: 35px;
    bottom: 35px;
}
.footer {
    bottom: 0;
    position: absolute;
    height: 35px;
    width: 100%;
}

http://jsfiddle.net/p3Lk0Lam/2/

Answer 2

UPD2

如果您的内容包装器中有滚动条而不是页面中的滚动条没问题，您可以将overflow: scroll 设置为内容包装器，并使用calc() 或其他方式为其设置适当的高度。