flex-grow: 1必须加在main上而非footer，因它用于分配剩余空间而非吸附底部；需父容器设display: flex、flex-direction: column及min-height: 100vh才能生效。
flex-grow: 1 本身不能“解决”页脚浮动问题，它只是工具；真正起效的前提是：父容器已设 display: flex 和 flex-direction: column，且该容器有可分配的垂直空间（即 min-height: 100vh）。
为什么给 footer 加 flex-grow: 1 反而会让页脚盖住内容
因为 flex-grow 的作用是“按比例抢剩余空间”，不是“沉到底部”。footer 一旦设了 flex-grow: 1，它会和 main 争高度，结果往往是页脚被拉高、内容区被压缩甚至消失。
- 正确目标是让中间内容区（如
main）主动伸展，把页脚“顶”下去 -
main设flex-grow: 1→ 吃掉 header 之后、footer 之前的全部空白 -
footer应保持默认行为，或显式写成flex: 0 0 auto - 若结构嵌套了一层普通
div（没设display: flex），main的flex-grow就完全不生效——它只认直接父容器
必须加 min-height: 100vh 的容器是谁
不是 html，不是 body（除非你确定项目没用 React/Vue 根挂载节点），而是 main 的**直接父容器**。常见真实结构是：<body><div id="root"><header></header><main></main><footer></footer></div></body> —— 此时 min-height: 100vh 和 display: flex 必须落在 #root 上。
-
height: 100vh不行：长页面会被截断 -
min-height: 100vh才能兼顾短内容撑满、长内容自然滚动 - iOS Safari 中地址栏收放会导致
100vh计算偏移，生产环境建议用min-height: 100dvh（Chrome 105+/Safari 16.4+ 支持） - 若需兼容旧版 Safari，可用
@supports (height: 100dvh) { ... }降级
margin-top: auto 比 flex-grow: 1 更适合哪些场景
当 main 内部结构动态、高度不可控（比如广告位插入、折叠面板、多语言文本行数突变），flex-grow: 1 容易因兄弟元素高度计算异常而失效。这时 margin-top: auto 是更鲁棒的选择——它不依赖高度总和，只认“这是最后一个子元素”。
立即学习“前端免费学习笔记（深入）”；
- 只需给
footer加margin-top: auto，其他子项不用动 - 要求父容器是
display: flex; flex-direction: column，且footer是直接子元素（不能包在 wrapper 里） - 旧版 Safari 对单独
margin-top: auto有渲染 bug，建议搭配flex: 0 0 auto使用 - 不要和
flex-grow: 1同时用，后者会覆盖前者效果
最常被忽略的一点：所有 flex 布局行为都依赖“高度链完整”。哪怕只漏掉一层 min-height 或多套了一层非 flex 容器，flex-grow: 1 就会静默失效——它不会报错，也不会警告，只是看起来“没用”。排查时优先检查父容器是否真有高度、是否真在 flex 链上。
