将div放在文档底部，而不是视口

Question

我想在文档的底部放置一个div，但它只会到达视口的底部。我如何仅使用CSS来实现这一点？我尝试了position: absolute; bottom: 0;，但这只会使它位于视口的底部。谢谢你的帮助。

Answer 1

在要使用position: absolute;的父容器上使用position: relative;。请参阅以下片段：

.wrapper {
height: 150vh;
position: relative;
}
footer {
position: absolute;
bottom: 0;
right: 0;
left: 0;
background: blue;
}

<div class="wrapper">
<footer>Footer</footer>
</div>

点击此处了解有关position的更多信息。