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

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>

- Stephen Collins

---

表格的高度会始终固定为150像素吗？还是会是可变的？ - evilgenious448

请将您的JSFiddle代码直接添加到问题中-您可以使用问题工具栏上的[<>]按钮创建一个可运行的Stack Snippet来实现这一点。在这里不鼓励使用外部链接，因为它们可能会随着时间的推移而改变或中断，如果用户无法看到代码，那么您的问题对未来的用户将没有帮助 :) - FluffyKitten

@evilgenious448 我想最大高度（max-height）可能可以用来解决这个问题，但是高度需要固定。 - Stephen Collins

@FluffyKitten 完成了 :) - Stephen Collins

Answer 1

你需要将.container的显示方式更改为flex。

display: flex;
flex-direction: column;

并且 .footer 需要设置 margin-top: auto;

代码如下：

.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;
}

<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>

在这个例子中，页脚占据了容器的整个宽度，如果需要的话，在样式方面很容易进行修复。

- evilgenious448

Answer 2

为了实现您的目的，您可以使用flex-box与可滚动的content元素相结合。通过使用flex-direction: column; justify-content: space-between;属性，content元素的最后一个子元素将始终位于底部。

编辑：我假设您希望拥有固定的内容height。但是这也适用于动态高度。为此，您需要将height: 150px;属性更改为max-height属性。

.container {
  position: relative;
  overflow-y: scroll;
  border: solid 1px black;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 16px;
}

.content{
  position: relative;
  width: 100%;
  height: 150px;
  background: red;
  overflow-y: auto;
}

.content__item{
  position: relative;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  color: #fff;
  font-size: 24px;
}

.footer {
  position: relative;
  width: 100%;
  background: green;
  color: #fff;
}

<div class="container">
   <div class="content">
   <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>
   </table>
   </div>
   <div class="footer">Footer</div>
</div>

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

- michaelT

---

这是不正确的，你可以在任何元素上使用sticky和fixed，无论它们嵌套在哪里。 - evilgenious448

谢谢，我会编辑我的答案。以前从没见过这种组合。 - michaelT

在你的解决方案中，页脚位于滚动条之外，这是一种有趣的方法。不确定这是否是原帖所期望的，但这可能是他问题的一个解决方案。 - evilgenious448