html - Anchor link cutting off the page based on height of absolute positioned element

Question

When clicking on an anchor link, it cuts off a portion of the page. Near as I can tell it occurs in all browsers.

http://jsfiddle.net/PJDWs/

If you go to that fiddle and click on the link at the top, you will notice that you are unable to scroll up to the top of the page. Effectively part of the page has been removed.

There are a couple things that cause it, but I don't know why they do. If you remove overflow: hidden from the .bodyContent then it does not exhibit this behavior. Also, you will notice that the distance of the cut off is exactly equal to the value of top: XXpx on .stuff. Thus setting top: 0px will fix the problem as well.

The issue is that for the specific design I'm working on, neither of these are options as the element needs to be positioned off the top and the parent needs overflow hidden. But more importantly, why is this occurring, and especially why does it occur across all browsers... it almost seems like it's by design.

Answer 1

If you remove the height:100%; and replace it with bottom:0; it will work because the height, with top and bottom set, is then defined by the enclosing container - it's an interesting bug but this workaround will get the job done.