gpt4 book ai didi

css - block 内绝对定位的 div,位置为 :fixed and scrollbars

转载 作者:行者123 更新时间:2023-11-28 09:20:12 26 4
gpt4 key购买 nike

我有一个带有 position: fixed 的 div,其中包含另外两个 div:一个带有内容,第二个必须始终位于主 div 的底部。

这是一个例子:

.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
height: 100px;
top: 0;
bottom: 0;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}
<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>

问题是当用户滚动主 block 的内容时,页脚开始与其他内容一起移动,尽管 position:absolute 是页脚 block 的位置。

有没有办法在不改变 html 结构的情况下将页脚粘贴到主固定 block 的底部?

如果主 div 包含很多子元素,而只有最后一个是我们需要固定在底部的页脚怎么办?示例:

.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
height: 100px;
top: 0;
bottom: 0;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}
<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>

最佳答案

由于绝对定位的元素在 .scroller 中并且您不希望它在滚动时移动,因此可滚动容器应该是 .content 而不是 .滚动条.

.content {
height: 100px;
overflow: auto;
}

此外,您应该从固定包装器中删除 bottom: 0,以便其高度由其内容指定,即 100px

.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
}
.content {
height: 100px;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}
<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>

如果你想要多个 .content 元素并且不想单独滚动每个元素,你可以将它们全部包装在一个 .scroller-inner 容器中,并且为其设置上面的样式。

.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
}
.scroller-inner {
height: 100px;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}
<div class="scroller">
<div class="scroller-inner">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
</div>
<div class="footer">FOOTER</div>
</div>

或者,如果您知道页眉的高度,则可以使页脚成为固定元素,并使用边距来修正其位置。不过,这有点老套。

.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
height: 100px; /* val1 */
top: 0; /* val2 */
overflow: auto;
}
.footer {
position: fixed;
white-space: nowrap;
top: 100px; /* val1 + val2 */
line-height: 20px; /* val3 */
font-size: 16px; /* val4 */
margin-top: -18px; /* val3/2 + val4/2 */
}
<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>

关于css - block 内绝对定位的 div,位置为 :fixed and scrollbars,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11956513/

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