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

问题描述

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

<img src="[图片1]" width="200" height="200" />

立即学习“前端免费学习笔记（深入）”；

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

github项目持续追踪

GitHub 项目更新追踪工具 - 自动检查多个 GitHub 项目的 Releases 和 CHANGELOG，生成更新摘要与影响分析报告。支持自动化定时任务。 如何使用 最简单的方式：直接用自然语言告诉我 你可以说 我会做 「检查 GitHub 更新」 检查最新版本 「添加 vscode」 追踪新项目 「停止追踪 xxx」 移除项目 「暂停更新检查」 暂停自动化 「给我看 openclaw 报告」 展示报告 触发词：「追踪项目更新」「检查 GitHub 更新」「项目更新报告」「设置更新提醒」

下载

<img src="[图片2]" width="200" height="200" />

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

<div class="outerdiv">
  <div class="footer">
    &copy; 2024 by ailu &nbsp
    <a href="xxx" target="_blank">
      <img alt="github" class="github" src="../../assets/github.svg" width="30">
    </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; 会自动设置上边距，使盒子占据剩余的垂直空间，从而始终位于底部。