footer悬空主因是html/body未设height:100%,导致flex高度链路中断;须设html,body{height:100%},body用flex column,main设flex:1,footer不加额外样式。

内容少时 footer 悬在半空,不是 flex 写错了,而是高度链路断在了 html 或 body 上——它们默认不占满视口,flex: 1 或 margin-top: auto 就没空间可作用。
必须给 html 和 body 设高度基准
浏览器不会自动让 html 和 body 占满 100vh,哪怕你后面所有 flex 层都写对了,也会因“无高可撑”而失效。
-
html, body { height: 100%; margin: 0; }是最稳的起点,兼容 IE11+ 且不受 iOS 地址栏缩放抖动影响 - 若用
min-height: 100vh,务必加兜底:min-height: -webkit-fill-available;(iOS Safari 必备) - 千万别只设
body { min-height: 100vh; }而漏掉html—— 高度无法继承,body的 100vh 会按 0 计算
flex-direction: column 容器必须是直接父级,且带 min-height
这个容器(比如 .app 或直接用 body)得同时满足三个条件,缺一不可:
display: flexflex-direction: column-
min-height: 100%(推荐)或min-height: 100vh(需兜底)
常见错误:套了多层 wrapper,但只有最外层设了 flex,内层没设 height: 100%,导致高度传不下去。
立即学习“前端免费学习笔记(深入)”;
主体内容区用 flex: 1,footer 别乱加样式
这是最容易踩坑的一环:footer 本身不需要任何 flex 属性,加了反而坏事。
-
.main { flex: 1; }等价于flex: 1 1 0;,能伸能缩,内容超长时也不会把 footer 顶出视口 - 如果用
flex: 1 0 auto(IE11 常见写法),遇到长内容时 footer 会被挤到页面外 -
footer上禁止设height、flex-shrink: 0、margin-bottom,尤其避免height+margin-top: auto同时存在——Safari 会算错剩余空间,导致.main高度塌缩
移动端键盘弹出时 footer 悬空?别信 100vh
iOS Safari 和部分安卓 WebView 中,软键盘弹出会动态重算 vh,min-height: 100vh 可能瞬间缩水,footer 就悬了半秒。这不是 bug,是 WebKit 行为。
- 首选方案:改用
height: 100%+html, body { height: 100%; },它不随键盘变化 - 若必须用
vh,监听resize事件动态更新容器高度(但要注意防抖,且仅限必要场景) - 绝对不要给
html或body加overflow: hidden—— 会切掉 footer 的点击区域和焦点,表单交互直接失效
真正卡住的往往不是 flex 属性本身,而是忘了重置 body 默认 margin,或者 html 根本没设高度;footer 贴底这事,90% 的问题出在高度没传透,而不是贴底逻辑没写对。


















