如何用CSS让页脚始终固定在底部？-css教程-PHP中文网

直接设margin-top: auto没用是因为父容器缺乏高度基准，必须为html和body设置min-height: 100vh且清除margin，外层容器设display: flex+flex-direction: column，footer作为直接子元素才能生效。

如何用css让页脚始终固定在底部？

为什么直接设 `margin-top: auto` 没用？

因为父容器没高度基准。margin-top: auto 在 flex 布局中能推元素到底部，但前提是它的父容器必须有明确的可用高度——而 html 和 body 默认不占满视口，它们的 height 是 auto，导致整个 flex 链条“没空间可分”。你看到页脚悬在半空，大概率不是 CSS 写错了，而是漏了这一步。

必须加：

html, body { margin: 0; min-height: 100vh; }（推荐 min-height 而非 height，避免内容超长时被截断）
外层包裹容器（比如 .app 或直接用 body）设 display: flex; flex-direction: column;
确保 footer 是该容器的**直接子元素**（不能嵌套在另一个 div 里）

用 `flex: 1` 给 `main` 还是用 `margin-top: auto` 给 `footer`？

优先选后者：footer { margin-top: auto; }。它更轻量、语义清晰、兼容性好（Safari 12+ 稳定），且不依赖 main 是否存在或是否为直接子元素。

如果用 main { flex: 1; }，要注意：

main 必须是 flex 容器的直接子元素
若 main 内容极少，又没设 min-height，它可能塌缩成 0 高度，导致 footer 上浮
当需要主内容区独立滚动时，main { flex: 1; overflow-y: auto; } 才有效；仅设 overflow-y: auto 不加 flex: 1 会失效

移动端和动态内容下 `100vh` 失效怎么办？

100vh 在 Safari iOS、Chrome Android 上会受地址栏/键盘弹出影响，导致视口高度突变——比如键盘弹起时 100vh 缩小，页面“上跳”，footer 被顶起。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

稳妥做法：

降级用 100dvh（2023 年起主流浏览器支持）：min-height: 100dvh;
监听 resize 事件，动态更新容器高度（适合异步加载后内容高度突变的场景）
避免给 footer 同时设 height 和 margin-top: auto，某些旧版 Safari 会误算剩余空间，导致 main 高度异常塌缩

Grid 方案比 Flex 更稳吗？

是的，尤其当 DOM 结构不可控时。Grid 不依赖元素顺序或层级深度，只要定义好行模板，footer 就稳在最后一行：

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  margin: 0;
}
header { /* 第一行 */ }
main   { /* 第二行，自动撑满剩余空间 */ }
footer { /* 第三行 */ }

注意点：