绝对定位的div在块内，位置:固定和滚动条

Question

我有一个带有 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>

问题是当用户滚动主块的内容时，页脚开始与其他内容一起移动，尽管页脚块的位置：绝对。

有没有办法在不更改 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>

Answer 1

由于绝对定位的元素位于.scroller内部，并且您不希望它在滚动时移动，因此应.content可滚动容器以.scroller。

.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>