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

enter image description here

回答1:

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/

回答2:

UPD2

If it is OK if you'll have scrollbar in your content wrapper and not in your page, you could set overflow: scroll to content wrapper and set proper height to it with calc() or somehow.

来源：https://stackoverflow.com/questions/31257432/is-it-possible-to-limit-adjust-the-scroll-height-of-a-browser-page

标签

html

css

scroll