CSS 盒子如何始终保持页面底部？

如何使 css 盒子始终位于底部？

问题描述

如图所示，在正常情况下，盒子会正常显示在页面底部：

但是，在触发“上箭头”事件后，盒子会向上移动：

视图代码和样式代码如下：

<div class="outerdiv">
  <div class="footer">
    &copy; 2024 by ailu &nbsp
    <a href="xxx" target="_blank">
      @@##@@
    </a>
  </div>
</div>

.outerdiv{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}
.footer {
  width: 100%;
  background: #42ace8;
  color: white;
  text-align: center;
  margin-top: 400px;
  padding: 40px 0 40px 0;
  font-size: 18px;
}

解决方案

要让盒子始终位于底部，可以使用 margin-top: auto;。

示例：

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

margin-top: auto; 会自动设置上边距，使盒子占据剩余的垂直空间，从而始终位于底部。

以上就是CSS 盒子如何始终保持页面底部？的详细内容，更多请关注硕下网其它相关文章！