如何让 CSS 容器始终位于底部？

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天米云给大家整理了《如何让 CSS 容器始终位于底部？ 》，聊聊，我们一起来看看吧！

如何让 CSS 容器始终位于底部？

在 CSS 中，使元素始终位于底部的常用方法是使用 margin-top: auto; 属性。这个属性将元素的垂直边距设置为剩余可用高度中的最大值，从而使元素被推到其父容器的底部。

考虑以下示例：

<div class="outerDiv">
  <div class="footer">...</div>
</div>

.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。

到这里，我们也就讲完了《如何让 CSS 容器始终位于底部？ 》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注米云公众号，带你了解更多关于的知识点！

确定线程何时结束