如何让Footer随内容高度变化始终置于页面底部？

问题描述 #

在多路由项目中，各页面高度存在差异，希望实现：无论页面内容是否填满视口，Footer都能自动置于页面底部——内容不足时固定在视口底部，内容超出时跟随内容下方（无需滚动额外距离查看）。此前尝试的嵌套div方案无效或已过时，当前静态定位的实现导致内容较少的页面仍需滚动才能看到Footer。

原始代码问题分析 #

1. HTML结构错误：Footer标签位于<body>外部，不符合HTML规范，浏览器解析时可能出现异常。
2. CSS布局逻辑错误：未给内容容器设置flex-grow属性，导致flex布局未生效；Footer使用硬编码的margin-top: calc(75% + 60px)，无法适配不同页面高度。

正确实现方案 #

步骤1：修正HTML结构

将Footer移入<body>内部，确保结构符合规范：

<body>
  <div id="app">
    <script type="module" src="/src/main.js"></script>
  </div>
  <footer class="footer">
    <h5>Footer</h5>
    <p>footer goes here</p>
  </footer>
</body>

步骤2：调整CSS布局

使用现代flex布局实现粘性Footer，无需硬编码高度：

/* 基础布局：将body设为flex容器，垂直排列 */
html, body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* 让内容容器占据body的剩余所有空间 */
#app {
  flex-grow: 1;
}

/* Footer样式：保持原有样式，移除错误的margin-top */
.footer {
  display: flex;
  flex-direction: column;
  background-color: gray;
  color: black;
  text-align: left;
  width: 100%;
}

原理说明 #

• 将html和body设置为min-height: 100vh，确保容器至少占满视口高度。
• 通过display: flex和flex-direction: column将body内的元素垂直排列。
• 给内容容器#app添加flex-grow: 1，使其自动填充body的剩余空间，从而将Footer推至页面底部：
  • 当内容不足时，#app占满视口剩余高度，Footer固定在视口底部；
  • 当内容超出视口时，#app随内容高度扩展，Footer自然跟随在内容下方。

内容的提问来源于stack exchange，提问作者DWKK