结论：footer贴底需确保父容器撑满视口，html和body设margin/padding为0且min-height:100vh；推荐用.wrapper包裹内容并设flex布局；flex:1适合主内容需滚动填满，margin-top:auto更稳定且干扰小；移动端需JS监听视口变化。
直接说结论：用 display: flex + flex-direction: column + min-height: 100vh，再给主内容区加 flex: 1 或 margin-top: auto，footer 就能“永远”贴底——但前提是父容器真撑满了视口高度，否则它只是看起来固定，实际会塌。
为什么 footer 总是掉到页面中间？
这不是 flex 写错了，而是容器没占满屏幕。浏览器默认 body 高度由内容决定，min-height: 100vh 必须设在能撑开的容器上，且它的所有父级（包括 html）都不能有 height 截断或 margin 干扰。
-
html和body必须设margin: 0、padding: 0，并至少加min-height: 100vh（不用height: 100vh，否则内容超长时会截断） - 不要直接在
body上写display: flex—— 旧版 Safari 对body的 flex 支持不稳定，第三方脚本也可能重置它 - 更稳妥的做法是包一层
div，比如叫.app或.page-wrapper，把 flex 样式全加在这层上
flex: 1 和 margin-top: auto 到底选哪个？
二者都能把 footer “顶”下去，但行为逻辑不同，适用场景也略有区别：
-
flex: 1是让主内容区主动伸展填满剩余空间，适合内容区域需要滚动、且希望它始终占满可用高度的场景 -
margin-top: auto是利用 flex 里 auto margin 的“吸顶”特性，把主内容尽可能往上贴，从而把 footer 推到底部；它不强制内容区拉伸，对内部子元素的 flex 行为干扰更小 - 如果主内容区本身是
display: flex容器，又用了flex: 1，再嵌套一层 flex 可能触发某些旧版 Chrome 的渲染 bug；这时margin-top: auto更稳 - 二者都要求 footer 是 flex 容器的**直接子元素**，且不能设
flex-shrink: 0或其他干扰布局的属性
移动端和动态内容下 footer 浮起来怎么办？
这不是 CSS 没写对，而是视口高度变了——比如软键盘弹出、地址栏缩放、或者异步加载完内容后 DOM 高度突变，min-height: 100vh 不会自动重算。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 无解，必须监听
resize或orientationchange，必要时用 JS 触发重排（例如给.app临时 toggle 一个 class） - 若用
margin-top: auto，某些 Android WebView 在键盘收起后不会自动恢复，可尝试在blur后强制scrollTo(0, 0)触发重绘 - 避免给 footer 设固定
height同时又用margin-top: auto，这会导致 flex 计算冲突，尤其在字体加载或图片懒加载后高度变化时
真正容易被忽略的点不是怎么写 flex，而是谁来撑高、谁来伸展、谁来响应变化——三者缺一不可。写完记得在 iOS Safari 和 Android Chrome 里真机测试一次，光靠桌面预览看不出软键盘引发的塌陷问题。
