必须为html和body设置margin: 0与min-height: 100vh，外层容器设display: flex+flex-direction: column且footer为其直接子元素，才能使footer { margin-top: auto }生效；否则因高度基准缺失导致flex链条无空间可分。
直接用 margin-top: auto 就能实现，但前提是父容器必须有明确高度基准——否则 footer 会原地不动，不是代码写错了，而是 html/body 缺少 min-height: 100vh 和 margin: 0。
为什么 margin-top: auto 在 flex 布局里没反应？
因为它的生效依赖两个硬条件：父容器必须是 display: flex + flex-direction: column，且该容器自身要有可用高度。而默认的 html 和 body 不占满视口，它们的 height 是 auto，导致整个 flex 链条“没空间可分”。
- 必须加：
html, body { margin: 0; min-height: 100vh; }（min-height比height更安全，避免内容超长被截） - 外层包裹容器（比如
<div class="app">或直接用body）要设：display: flex; flex-direction: column; min-height: 100vh; -
footer必须是这个 flex 容器的**直接子元素**，不能嵌套在另一个div里
footer { margin-top: auto } 和 main { flex: 1 } 怎么选？
优先用前者。它语义清晰、不依赖 main 是否存在，也不要求 main 是直接子元素，兼容性更好（Safari 12+ 稳定），DOM 更干净。
- 如果选
main { flex: 1 }，必须确保main是 flex 容器的直接子元素 -
main内容极少时，若没设min-height，可能塌缩成 0 高度，把footer顶上去 - 需要主内容区独立滚动时，得配
overflow-y: auto，但仅加这个不行——必须先有flex: 1，否则它不会被约束高度
移动端和动态内容下 100vh 失效怎么办？
100vh 在 iOS Safari、Android Chrome 中受地址栏/键盘弹出影响，视口高度会突变，导致页面“上跳”，footer 被顶起。
立即学习“前端免费学习笔记（深入）”；
- 稳妥降级：改用
min-height: 100dvh（2023 年起主流浏览器支持） - 异步加载后内容高度突变？得监听
resize事件，手动更新容器高度 - 别同时给
footer设height和margin-top: auto——某些旧版 Safari 会误算剩余空间，导致main高度异常塌缩
真正容易被忽略的是：DOM 结构是否满足“直接子元素”这一条，以及 html/body 的 min-height 和 margin 是否真的生效——哪怕只漏一个，整个布局就失效。
