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

Question

我的问题是绿色子元素不粘在底部，即使它是绝对定位的: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>