如何让 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 容器始终位于底部？的详细内容，更多请关注米云其它相关文章！