锚定链接根据绝对定位元素的高度切割页面 [英] 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.
如果你去那个小提琴，点击顶部的链接，你会注意到你无法向上滚动到页面的顶部。
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.
有一些事情会导致 ，但我不知道他们为什么会这样做。如果从 .bodyContent 中删除 overflow：hidden ，那么它不会显示此行为。此外，您会注意到，切割的距离正好等于 top：XXpx 在上的值<。$ f $ c> .stuff 。因此设置 top：0px 也会解决这个问题。
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.
问题是， m工作，这些都不是选项，因为元素需要放在顶部，父需要溢出隐藏。但更重要的是，为什么会出现这种情况，尤其是为什么它会出现在所有浏览器上...它几乎看起来像是设计的。
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.
推荐答案
如果您删除 height：100％; 并将其替换为 bottom：0; 因为顶部和底部设置的高度是由封闭容器定义的 - 这是一个有趣的错误，但这种解决方法将完成工作。
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.
这篇关于锚定链接根据绝对定位元素的高度切割页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
