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

debugcn 发表于 Dev

斯蒂芬·柯林斯

我很难让页脚停留在可滚动块元素的底部。仅当内容物（在这种情况下为表格）大于容器高度时才起作用。如何始终使页脚固定在底部？

我尝试使用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>

编辑：为什么这被标记为重复？所选页面未提供针对此特定问题的解决方案。

邪恶的448

您需要更改的显示.container以伸缩

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>

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。