是否可以限制/调整浏览器页面的滚动高度? [英] Is it possible to limit / adjust the scroll height of a browser page?

问题描述

我有一个页面，用于

I have a page for my csspp library and tool that makes use of a fixed header and footer. These are fixed when the browser is at least 1,300px wide.

The problem I have is that when those objects are fixed, it changes the size of the area the user can see. However, when you use Page Up and Page Down, these fixed objects are not taken in account (at least not by default). In other words, when you do a Page Down, instead of seeing the next page in the visible area, the browser scrolls down by One Whole Page. I would like to be able to tell the browser to scroll by the height of the visible data (i.e. the length of the arrow in the image below). The Page Up has the same problem. If you start at the bottom of the page and go one page up, you'll miss data roughly equal to the height of the header + footer.

My question is: is it possible to use CSS 3 and/or HTML 5 to resolve this scroll height problem?

I have seen that working on various websites such as wired.com (they have a fixed header), but they use a lot of JavaScript so I am thinking they hacked the scrolling in JavaScript...

解决方案

Yes!

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

And

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

这篇关于是否可以限制/调整浏览器页面的滚动高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！