将粘性位置固定在可滚动元素的底部

Question

我无法将页脚粘贴到可滚动块元素的底部。仅当内容（本例中为表格）大于容器高度时才有效。如何始终让页脚粘在底部？

我尝试使用position: absolute它，但当用户滚动时它保持固定。

.container {
  position: relative;
  overflow-y: scroll;
  height: 150px;
  display: block;
  border: solid 1px black;
}

.footer {
  position: sticky;
  right: 0;
  bottom: 0;
  float: right;
  background-color: lightblue;
}

<div class="container">
  <table>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
  </table>
  <div class="footer">Footer</div>
</div>
<br/>
<div class="container">
  <table>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
  </table>
  <div class="footer">Footer</div>
</div>

Answer 1

您需要将显示更改.container为flex

display: flex;
flex-direction: column;

并且.footer需要有一个margin-top: auto;

请参阅此处的代码：

display: flex;
flex-direction: column;

.container {
  position: relative;
  overflow-y: scroll;
  height: 150px;
  border: solid 1px black;
  display: flex;
  flex-direction: column;
}

.footer {
  position: sticky;
  right: 0;
  bottom: 0;
  float: right;
  background-color: lightblue;
  margin-top: auto;
}

在此示例中，页脚占据了容器的整个宽度，但是如果需要的话，很容易在样式中修复。