位置:指定高度时粘性不起作用
问题:
用户遇到问题当为页面主体和 #main 元素设置高度属性时,指定为 #footerNav 的页脚无法遵守位置:粘性行为。页脚保持静态,而不是固定在视口顶部滚动。
解决方案:
问题是由于高度属性导致内容溢出。 position:sticky 被设计为仅当其包含块达到指定阈值时才变为活动状态。在这种情况下,设置 body { height: 100%;创建一种情况,页脚立即到达其包含块的末尾,从而防止position:sticky激活。
说明:
根据位置的定义:粘性,当元素在其包含块内跨越指定阈值时应用粘性位置。本例中的包含块是 body,并且当设置了 body { height: 100% } 时,body 的高度被限制在视口内。
当指定 #main { height: 92% } 时,92%的可用高度分配给#main,只留下8%给#footerNav。由于 #footerNav 已经位于其包含块(主体)的底部,因此它无法滚动越过视口边界并激活位置:粘性。
解决方案:
要解决此问题,请确保内容不会溢出包含块。这可以通过从 body 和 #main 中删除高度属性来实现,允许内容在视口内自然流动而不会导致溢出。
附加说明:
以上是当指定页面主体和 #main 元素的高度时,为什么'position: Sticky”在我的页脚上不起作用?的详细内容。更多信息请关注PHP中文网其他相关文章!