html - 滚动 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，并赋予scrollable内容为 1 的 flex 值。从页脚中删除定位，这样就可以了。

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

对于实现:一定要跟进 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>