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

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。

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

删除 .footer 上的 position: absolute 解决了案例 "little content"（参见 fiddle），但打破了其他 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>

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

Sticky footer in scroll-y-container depending on height of content

html

css

sticky

sticky-footer