Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

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

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...