Question

我有一个position: fixed的div，里面包含另外两个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>

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

1 个答案: