当指定页面主体和 #main 元素的高度时，为什么“position: Sticky”在我的页脚上不起作用？

位置：指定高度时粘性不起作用

问题：

用户遇到问题当为页面主体和 #main 元素设置高度属性时，指定为 #footerNav 的页脚无法遵守位置：粘性行为。页脚保持静态，而不是固定在视口顶部滚动。

解决方案：

问题是由于高度属性导致内容溢出。 position:sticky 被设计为仅当其包含块达到指定阈值时才变为活动状态。在这种情况下，设置 body { height: 100%;创建一种情况，页脚立即到达其包含块的末尾，从而防止position:sticky激活。

说明：

根据位置的定义：粘性，当元素在其包含块内跨越指定阈值时应用粘性位置。本例中的包含块是 body，并且当设置了 body { height: 100% } 时，body 的高度被限制在视口内。

当指定 #main { height: 92% } 时，92%的可用高度分配给#main，只留下8%给#footerNav。由于 #footerNav 已经位于其包含块（主体）的底部，因此它无法滚动越过视口边界并激活位置：粘性。

解决方案：

要解决此问题，请确保内容不会溢出包含块。这可以通过从 body 和 #main 中删除高度属性来实现，允许内容在视口内自然流动而不会导致溢出。

附加说明：

• 仍然不建议以百分比形式指定高度，例如 vh，因为它可能会导致相同的问题。
• 该问题在 Firefox 61 (Nightly)、Safari 53 (Tech Preview) 和Chrome 65。

以上是当指定页面主体和 #main 元素的高度时，为什么“position: Sticky”在我的页脚上不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！