最稳解法是display: flex+flex-direction: column，因不脱离文档流、不遮内容、兼容好且响应式天然；position: fixed/absolute会使页脚脱离流，导致遮盖内容、打印错乱、读屏跳过及scrollheight异常。

直接用 display: flex + flex-direction: column 是目前最稳、最语义清晰的解法，不用 JS、不遮内容、兼容性好，且天然支持响应式。

为什么不能用 position: fixed 或 absolute

这两种方式会让 footer 脱离文档流：内容滚动时容易被遮盖（尤其表单、地图、长列表），打印样式错乱，屏幕阅读器可能跳过它，scrollHeight 计算异常。即使加了 bottom: 0，在短页面中它确实到底部了，但长页面里会“悬停”在视口底边，把最后几行内容盖住——这不是粘性，是覆盖。

flex 布局的关键三步

必须同时满足以下三点，缺一不可：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• html 和 body 都设 height: 100%（不是 min-height），并清空默认 margin
• body 设 display: flex、flex-direction: column、min-height: 100vh
• main（或主体容器）设 flex: 1；footer 不设高度依赖，或显式设 flex: 0 0 auto

常见踩坑点

这些细节看似小，但一错就失效：

• 漏写 html { height: 100% } → body 的 100% 没有计算基准，min-height: 100vh 在某些 Safari 版本下也不够稳
• 给 main 设了 height: 100% 或 overflow: hidden → 它不再弹性伸缩，页脚立刻上浮
• 用 flex: 1 1 auto 而非 flex: 1 0 auto → 旧版 Safari 可能压缩 main 高度，导致页脚被挤上去
• 页脚内容撑高后没设 box-sizing: border-box → 内边距/边框让实际高度超出预期，底部留白

真正难的不是写对那几行 CSS，而是理解「页脚沉底」本质不是定位问题，而是空间分配问题——你得让主体区域主动去占满剩余高度，而不是让页脚自己去找位置。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！