了解粘性定位
粘性定位，如由 CSS 定义，在流根（通常是浏览器视口或可滚动容器）内运行，并使元素相对于周围环境保持固定，直到满足某些条件。当元素遇到指定的阈值（例如，距视口的顶部偏移量）时，它会“卡”在适当的位置，直到到达其包含块的相对边缘。
影响粘性功能的溢出
在给定的场景中，“position:sticky”应用于元素，但行为不符合预期，必须考虑元素的包含块以及可能存在的任何溢出。
元素和包含块关系
在提供的代码中，带有 'position: Sticky' 的元素 (#footerNav) 其包含块设置为 'html, body' 。由于 CSS 定义了 'html, body { height: 100% }'，整个视口成为包含块。
溢出问题
但是，由于 #main div 具有“高度：92%”属性，而 #footerNav 具有“高度：8%”，内容溢出超出组合的“高度”值。这种溢出创建了一个扩展的包含块，允许粘性元素过早到达相对的边缘（即，在 #main 的底部）。因此，粘性元素会固定在 #main 的末尾，而不是一直卡住直到到达浏览器窗口底部。
解决方案
解决方法解决这个问题，可以取消 #main 元素的高度限制，让内容自然溢出。这可确保滚动容器保留在整个视口中，并且粘性元素按预期运行，保持卡住状态，直到到达页面的实际底部。
以上是为什么'位置：粘性”不使用定义的元素高度？的详细内容。更多信息请关注PHP中文网其他相关文章！
