Considering setting up the page layout where the HTML has overflow: hidden
, with a fixed header and footer, while allowing the body content to have overflow: scroll
.
The current challenge is that the scrollbar appears within the content div. Is there a way to make the browser's primary scrollbar only interact with the content div?
Relevant CSS:
html {
overflow: hidden;
}
header {
position: fixed;
width: 100%;
height: 15%;
}
footer {
position: fixed;
width: 100%;
bottom: 10%;
height: 5%;
}
#content {
position: fixed;
height: 80%;
max-width: 960px;
margin: 0 auto;
overflow: scroll;
}
Here is the concept: http://jsfiddle.net/6gcfx/ (please note that the primary scrollbar in this demo does not move the content as desired).