如果容器可滚动，如何将元素粘贴到其容器底部？答案

【问题标题】：How to stick element to bottom of its container if the container is scrollable?如果容器可滚动，如何将元素粘贴到其容器底部？
【发布时间】：2021-09-12 08:06:04
【问题描述】：

我的问题是绿色子元素不会粘在底部，即使它的绝对位置是底部：0。

容器中的 hello world 文本使容器可滚动并使绿色元素无法粘在底部。

编辑：容器需要位置：固定。（它是一个购物车模式）。

.container {
 background: red;
 height: 100%;
 width: 200px;
 position: fixed;
 overflow: auto;
}

.child {
 background: green;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
}

<div class='container'>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>

v
<div class='child'>
asdf
</div>

</div>

【问题讨论】：

用position:relative将整个容器包裹在另一个元素中，并将绝对元素放入其中。
容器应该有position: relative让孩子使用position: absolute。
所以您希望“asdf”始终保持在列表的底部，并正常滚动浏览其他列表？

标签： html css css-position fixed absolute

【解决方案1】：

也许position: sticky 对孩子有用吗？这样它就不会覆盖容器的底部，在使用position: absolute 时，您必须使用padding 来处理它。

.container {
 background: red;
 display: flex;
 flex-direction: column;
 height: 100%;
 width: 200px;
 position: fixed;
 overflow: auto;
}

.container__inner {
  flex: 1
}

.child {
 background: green;
 position: sticky;
 bottom: 0;
 left: 0;
 right: 0;
}

<div class='container'>
<div class='container__inner'>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>
<div>hello world </div>

v
</div>
<div class='child'>
asdf
</div>

</div>

【讨论】：

感谢您的回答，但是当父容器中没有“hello world”内容时，绿色的“asdf”向上移动，不再粘在容器底部。
我编辑了这个例子来完成你想要的。
感谢您的回复，解决了父目录中没有内容时绿色页脚粘在底部的问题。然而，现在绿色页脚看起来像它的高度在文本周围被挤压。我忘了提到页脚的高度应该是 80 像素（或 11%）。此外，当您滚动到底部时，页脚和出现的容器底部之间会出现间隙。

【解决方案2】：

position: sticky 可以解决问题。
不过还需要加bottom: 8px，防止被半隐藏

.container {
  background: red;
  height: 100%;
  width: 100%;
  position: fixed;
  overflow: auto;
}

.child {
  background: green;
  position: sticky;
  bottom: 8px;
  left: 0px;
  right: 0px;
}

<div class='container'>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>
  <div>hello world </div>

  <div class='child'>
    footer preview
  </div>
  <div style='background: green'>rest of footer<br> &nbsp</div>

</div>

【讨论】：

感谢您的回答，但是当父容器中没有“hello world”内容时，绿色页脚会向上移动，不再粘在容器底部。
我不知道你想要那个。我会试试看能不能解决这个问题

【解决方案3】：

使用position:sticky 并给出一些底部边距，这样元素就不会隐藏。

【讨论】：