如果容器可滚动,如何将元素粘贴到容器底部?
How to stick element to bottom of its container if the container is scrollable?
我的问题是绿色子元素没有粘在底部,即使它使用 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>
也许 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>
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>  </div>
</div>
使用 position:sticky
并提供一些底部边距,这样元素就不会隐藏。
我的问题是绿色子元素没有粘在底部,即使它使用 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>
也许 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>
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>  </div>
</div>
使用 position:sticky
并提供一些底部边距,这样元素就不会隐藏。