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

Question

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

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

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