CODEWITHSUNDEEP
htmlcss
Phrogz
Phrogz

Reputation: 303166

Scroll to anchor on pseudo-framed site hides the header

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

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

Upvotes: 1

Views: 253

Answers (2)

Phrogz
Phrogz

Reputation: 303166

An alternative fix (and further insight into the problem):

Removing the 600px bottom padding from #contents fixes the problem. The same effect (having a great deal of blank space at the end of the document so that the last item can be linked to directly) can be achieved either via:

#contents > *:last-child { margin-bottom:600px }

Or, using simpler CSS and a slight change in the markup:

<article id="contents">
  <!-- full contents here -->
  <hr id="contents-end">
</article>

#contents-end { visibility:hidden; margin-top:600px }

Upvotes: 0

Einar &#211;lafsson
Einar &#211;lafsson

Reputation: 3177

why not try position:fixed for the #header and the #site-nav?

Upvotes: 2

Related Questions