gpt4 book ai didi

html - CSS - 位置 : sticky stops at the bottom of the original screen height

转载 作者:行者123 更新时间:2023-12-05 01:00:31 25 4
gpt4 key购买 nike

我的设置类似于:

<body>
<div class="non-moving-header">
</div>
<div class="floating-header">
</div>
<div>
Some vertically expanding content...
</div>
</body>

body, html
{
height: 100%;
min-height: 100%;
}

.floating-header
{
z-index: 9999;
top: 0;
position: sticky;
}

问题是粘性元素可以正常工作,直到它到达视口(viewport)的原始底部位置,它会停止,就好像它已经到达其父元素的末尾一样。如果我手动将 body/html 高度属性设置为 1500 之类的值,它会按预期跟踪整个文档。有没有办法让 position:sticky 正确跟踪到自动调整大小的父元素?

最佳答案

enter image description here

您需要将 overflow:scroll 添加到您的 CSS 以用于您的整页包装器/容器 div,然后您的目标粘性元素应该滚动您的网页的整个长度,并且在您退出时不会卡住你原来的视口(viewport)。

关于html - CSS - 位置 : sticky stops at the bottom of the original screen height,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49263729/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com