tl;dr
I have an HTML+CSS page layout using positioned and scrolling boxes to simulate a framed layout. When I click on a link to a sub-page anchor, the entire page scrolls, hiding the header.
Details:
You can see the problem here: http://phrogz.net/tmp/framed.html
-
When the browser window is tall enough that the side navigation does not overflow, clicking on a link correctly scrolls the ‘contents’ section to the header.
-
However, when the browser window is so short that the side navigation shows a sidebar, clicking on a link in the sidebar causes the entire
bodyto scroll so that the header is off the top of the screen. Chrome, FF, and IE9 all behave similarly.
The header, sidebar and contents are all absolutely positioned to fit within the viewport and have either overflow:hidden or overflow:auto. I also have html, body { overflow:hidden }.
How can I best fix this, so that navigating to an #id on the page never scrolls the body?
I’m looking for a CSS/HTML solution; I know that I could use JavaScript hacks to ‘fix’ this, either by intercepting the click and scrolling the #contents through script as desired, or to use document.body.scrollTop = 0 after the click occurs.
Here’s a summary of the markup:
framed.html
<body>
<article id="contents">
<section id="section1">
<header><h2>Section 1</h2></header>
<!-- section 1 contents -->
</section>
<section id="section2">
<header><h2>Section 2</h2></header>
<!-- section 2 contents -->
</section>
<!-- more sections -->
</article>
<nav id="site-nav"><ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<!-- more links -->
</ul></nav>
<header id="header"></header>
</body>
framed.css
html, body { margin:0; padding:0; overflow:hidden }
#header {
overflow:hidden;
position:absolute;
top:0; left:0; width:100%; height:50px;
}
#contents {
overflow:auto;
position:absolute;
top:50px; left:210px; right:0; bottom:0;
padding:1em 1.5em 600px 1.5em;
}
#site-nav {
overflow:auto;
position:absolute;
top:50px; bottom:0; left:0; width:210px;
}
Edit: Fixed version of the document can be seen here: http://phrogz.net/tmp/framed-fixed.html
why not try position:fixed for the #header and the #site-nav?