最可靠方案是 display: flex + min-height: 100vh；需确保 html、body 设 min-height: 100vh 且 margin: 0，避免 footer 悬浮；推荐 main { flex: 1 } 推 footer 到底，禁用混用 flex: 1 与 margin-top: auto。
用 display: flex + min-height: 100vh 是目前最可靠、语义清晰且无需 JS 的方案；position: fixed 虽能“钉”在视口底，但会遮内容、破坏可访问性，只适合全局常驻型版权栏。
为什么 footer 总是浮在半空？根元素没撑满视口高度
绝大多数失败不是因为 Flex 写错了，而是 html 和 body 缺少高度基准。浏览器默认不把 body 当作 100% 视口容器，所以 flex: 1 或 margin-top: auto 都没空间可分配。
- 必须显式设置：
html, body { height: 100%; margin: 0; }或更推荐html, body { min-height: 100vh; margin: 0; } - 不要只给
body加display: flex—— Safari 旧版本对body的 flex 支持不稳定，建议额外套一层.app或直接确保body是 flex 容器且子元素为header、main、footer直接子节点 -
min-height: 100vh比height: 100%更安全：避免嵌套百分比高度计算失效
Flexbox 方案：用 flex: 1 还是 margin-top: auto？
两者都能推 footer 到底部，但行为和兼容性不同：
- 推荐
main { flex: 1; }：明确让主体区域“占满剩余空间”，滚动行为可控，main可安全加overflow-y: auto实现局部滚动 -
footer { margin-top: auto; }更轻量，但要求footer是 flex 容器的**直接子元素**，且不能同时设height+margin-top: auto（某些 Safari 版本会塌缩main） - 别混用：如果
main设了flex: 1，就不要给footer加margin-top: auto，否则可能冲突
用 position: fixed 时，内容被遮住怎么办？
position: fixed 让 footer 脱离文档流，它不会为自身留出空间，所以主体内容必须主动避让。
- 给
main或内容容器加padding-bottom，值 ≥footer高度（如padding-bottom: 4rem;） - 必须加
left: 0; width: 100%：仅bottom: 0不够，fixed元素默认left: auto，在 flex 容器中易水平偏移 - 加
z-index（如z-index: 1000），防止被其他绝对定位元素覆盖 - 禁用
position: absolute和position: fixed同时声明——后者会覆盖前者，纯属冗余
响应式与动态内容下的坑：键盘弹出、地址栏缩放会破坏 100vh
min-height: 100vh 在移动设备上受地址栏显示/隐藏、软键盘弹出影响，导致高度突变——这不是 CSS 能自动修复的。
- 现代浏览器可用
100dvh替代（dvh= dynamic viewport height），它会随视口变化实时更新 - 降级写法：
min-height: 100dvh; min-height: 100vh;，老浏览器回退到vh - 异步加载内容后高度变化？CSS 无法监听，需 JS 补位（如监听
resize或用ResizeObserver）
真正容易被忽略的是：footer 是否必须参与文档流。如果它只是版权信息、始终可见，fixed 合理；如果它是页面逻辑终点（比如表单提交后展示的总结区块），就必须用 flex 或 grid 让它自然跟随内容，否则滚动到底部时用户根本看不到它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
