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% 的问题出在高度没传透，而不是贴底逻辑没写对。
