我有一个 div position: fixed
,其中包含其他两个 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>
问题是当用户滚动主块的内容时,页脚开始与其他内容一起移动,尽管 position:absolute 页脚块。
有没有办法在不改变 html 结构的情况下将页脚粘贴到主固定块的底部?
如果主 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>