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

Question

我的问题是绿色子元素没有粘在底部，即使它使用 bottom: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>

Answer 1

也许 child 上的 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>

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

Answer 3

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

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

How to stick element to bottom of its container if the container is scrollable?

html

css

css-position

fixed

absolute