首页 > web前端 > css教程 > 正文

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

Barbara Streisand
发布: 2024-11-17 06:58:03
原创
888 人浏览过

Why is `position: sticky` not working on my footer when the height of the page body and the #main element are specified?

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

问题:

用户遇到问题当为页面主体和 #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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板