Anchor link slicing a page based on the height of an absolute positioned element

Question

When you click on the anchor link, it cuts off part of the page. Nearby, as I can say, this happens in all browsers.

http://jsfiddle.net/PJDWs/

If you go to this fiddle and click on the link at the top, you will notice that you cannot scroll up to the top of the page. In fact, part of the page has been deleted.

There are a few things that cause this, but I don’t know why they do it. If you remove overflow: hidden from .bodyContent , then it does not exhibit this behavior. In addition, you will notice that the cutting distance is exactly equal to the top: XXpx on .stuff . Thus, setting top: 0px also fix the problem.

The problem is that for a specific project I'm working on, none of them is a parameter, because the element must be located on top and the parent overflow is hidden. But more importantly, why is this happening, and especially why is it happening in all browsers ... it almost looks like a design.

Answer 1

If you remove height:100%; and replace it with bottom:0; , this will work, because the height, with the top and bottom sets, is then determined by the container-container - this is an interesting mistake, but this workaround will be executed.