CSS 如何让盒子始终固定在页面底部？

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《CSS 如何让盒子始终固定在页面底部？ 》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

CSS 如何让盒子始终保持底部

在这个问题中，我们希望实现一个固定在底部、不受页面可视区域大小影响的盒子。

问题描述：

如图所示，当页面高度小于盒子的高度时，盒子会正常显示在底部。但是，当向上滚动页面时，盒子会跟随滚动移动，而不是固定在底部。

HTML 结构：

<div class="outerDiv">
  <div class="footer">
    <!-- 内容 -->
  </div>
</div>

CSS 样式：

.outerDiv {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}

.footer {
  width: 100%;
  background: #42ace8;
  color: white;
  text-align: center;
  padding: 40px 0 40px 0;
  font-size: 18px;
}

解决方案：

为了解决这个问题，我们可以使用 margin-top: auto; 属性。这个属性会根据可视区域（viewport）的高度，自动设置盒子的上边距，使其始终保持在底部。

修改后的 CSS：

.footer {
  ...
  margin-top: auto;
  ...
}

使用 auto 值表示，浏览器将根据可视区域高度自动计算合适的上边距，从而确保盒子始终固定在底部。

今天关于《CSS 如何让盒子始终固定在页面底部？ 》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！