滚动容器中的粘性页脚取决于内容的高度

Question

我们有一个带有overflow-y:scroll 的容器，它的页脚必须是粘性的（底部为 0），除非滚动容器内的内容 + 页脚的高度（动态）大于容器高度。

HTML：

<div class="wrapper">
  <div class="scroll">
    <div class="content">
    Lorem ipsum dolor sit amet
    </div>
    <div class="footer">
    This must stick to the bottom until .content is too long, then go below it
    </div>
  </div>
</div>

.content 和 .footer 可以有更多或更少的内容。

如果可能，我们不想为此使用 JS。

我在这里创建了一个有几个状态的小提琴：http://jsfiddle.net/bqvtf1zo/1/

删除 .footer 上的 position: absolute 可以解决“少量内容”的情况（参见小提琴），但会破坏其他 2 种情况。

Answer 1

你需要创建一个flex 容器。（虽然还有其他方法可以解决这个问题：https://css-tricks.com/couple-takes-sticky-footer/）

对于容器，将display 设置为flex，将flex-direction 设置为column，并将可滚动内容的flex 值设置为1。从页脚中删除定位，就可以了。

这将导致内容拉伸以填充容器的高度（如果有），并且会导致页脚粘在内容的底部。

对于实现：一定要跟进 flexbox 的所有跨浏览器问题，例如前缀和错误。 https://github.com/philipwalton/flexbugs

.wrapper{
  position: relative;
  height: 205px;
  width: 200px;
}
.scroll{
  border: 1px solid red;
  overflow-y: scroll;
  height: 100%;
  width: 100%;
   display:flex;
  flex-direction: column;
}
.content{
  background-color: #ccc;
  flex:1;

}
.footer{
  background-color: #efefef;

}

<h1>
 little content
</h1>

<div class="wrapper">
  <div class="scroll">
    <div class="content">
    Lorem ipsum dolor sit amet
    </div>
    <div class="footer">
    This must stick to the bottom until .content is too long, then go below it
    </div>
  </div>
</div>


<h1>
 large content
</h1>

<div class="wrapper">
  <div class="scroll">
    <div class="content">
    1. Lorem ipsum dolor sit<br>
    2. Lorem ipsum dolor sit<br>
    3. Lorem ipsum dolor sit<br>
    4. Lorem ipsum dolor sit<br>
    5. Lorem ipsum dolor sit<br>
    6. Lorem ipsum dolor sit<br>
    7. Lorem ipsum dolor sit<br>
    8. Lorem ipsum dolor sit<br>
    9. Lorem ipsum dolor sit<br>
    10. Lorem ipsum dolor sit<br>
    11. Lorem ipsum dolor sit<br>
    12. Lorem ipsum dolor sit<br>
    13. Lorem ipsum dolor sit<br>
    </div>
    <div class="footer">
    This must stick to the bottom until .content is too long, then go below it
    </div>
  </div>
</div>

<h1>
 large content with large footer
</h1>

<div class="wrapper">
  <div class="scroll">
    <div class="content">
    1. Lorem ipsum dolor sit<br>
    2. Lorem ipsum dolor sit<br>
    3. Lorem ipsum dolor sit<br>
    4. Lorem ipsum dolor sit<br>
    5. Lorem ipsum dolor sit<br>
    6. Lorem ipsum dolor sit<br>
    7. Lorem ipsum dolor sit<br>
    8. Lorem ipsum dolor sit<br>
    9. Lorem ipsum dolor sit<br>
    10. Lorem ipsum dolor sit<br>
    11. Lorem ipsum dolor sit<br>
    12. Lorem ipsum dolor sit<br>
    13. Lorem ipsum dolor sit<br>
    </div>
    <div class="footer">
    This must stick to the bottom until .content is too long, then go further down<br>
    Some additional content
    </div>
  </div>
</div>