页脚悬空的根本原因是容器未撑起：必须同时使用min-h-screen和flex flex-col，缺一不可；仅min-h-screen无弹性布局，flex-1在非flex容器中无效。
页脚悬在半空、不贴底，根本不是代码写错了，而是容器没“撑起来”——min-height: 100vh 和 flex-col 必须同时存在，缺一不可。
为什么只加 min-h-screen 页脚还是悬空
因为 min-h-screen 只保证最小高度，但没启用弹性布局；flex-1 在非 flex 容器里完全无效。常见错误是：<div class="min-h-screen"><main></main><footer></footer></div> —— 没有 flex flex-col，main 就不会伸展，页脚自然塌在内容下方。
- 必须给根容器同时加
min-h-screen、flex、flex-col - Tailwind 默认不生成
flex-grow类，得用flex-1（等价于flex: 1） - 如果用原生 CSS，
min-height: 100vh比height: 100vh更安全，避免内容超长时被截断
margin-top: auto 和 flex-1 该选哪个
两者都能推页脚到底部，但行为逻辑不同：margin-top: auto 是让页脚自己“沉”，flex-1 是让主体“顶”。前者更轻量，后者更可控。
- 用
margin-top: auto：只需加在footer上，且它必须是flex-col容器的**直接子元素**，顺序必须在main之后 - 用
flex-1：加在main上，要求父容器是flex flex-col，且不能给main设height或min-height，否则会干扰弹性计算 - 旧版 Safari 对
margin-top: auto单独使用有渲染 bug，建议搭配flex: 0 0 auto使用，或直接选flex-1方案
iOS Safari 中页脚短暂上浮怎么办
这不是 bug，是 Safari 动态调整视口高度（地址栏收/放、键盘弹出）导致 min-h-screen 计算滞后。纯 CSS 无法彻底规避，但可缓解。
立即学习“前端免费学习笔记（深入）”；
- 临时解法：在根容器上叠加
h-screen，即class="min-h-screen h-screen flex flex-col" - 更稳妥的降级：用
100dvh替代100vh（支持 iOS 16.4+），如min-h-[100dvh] - 不要给
html或body加overflow: hidden，会切掉页脚的焦点和点击区域
内容极短时页脚仍不贴底？检查这些隐性干扰
即使结构正确，页脚也可能因几个“看不见”的样式失效。重点排查以下三点：
-
body有默认margin（比如 8px），必须显式设为margin: 0 -
header或footer内部用了position: absolute或transform，导致它们脱离文档流，高度不参与 flex 计算 -
main里嵌套了另一个 flex 容器且设了height: 100%，会把父级flex-1的空间吃掉
最常被忽略的是：页脚内容变高时，整个页面会自动滚动，而不是遮挡或溢出——这恰恰说明方案生效了。别为了“看起来没滚动”强行压窄页脚或限制 main 高度。
