如何让 css 容器始终位于底部？
在 CSS 中，使元素始终位于底部的常用方法是使用 margin-top: auto; 属性。这个属性将元素的垂直边距设置为剩余可用高度中的最大值，从而使元素被推到其父容器的底部。
考虑以下示例：
.outerDiv {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.footer {
width: 100%;
background: #42ace8;
color: white;
text-align: center;
margin-top: auto;
}在这种情况下，footer 容器将自动调整其顶部边距，以便始终位于 outerDiv 的底部。这将解决在向上滚动页面时 footer 占据整个视口区域的问题。
此外，还可以使用 CSS position 属性结合 bottom: 0; 来将元素绝对定位在父容器的底部。然而，这种方法可能与其他布局技巧冲突，因此 margin-top: auto; 通常是 preferred approach。
立即学习“前端免费学习笔记（深入）”；
