最可靠做法是给 main 加 flex-grow: 1，前提是父容器设 display: flex 和 flex-direction: column 且高度链完整；flex-grow 必须作用于中间内容区以主动吸收剩余空间推下页脚，而非页脚自身伸展。
直接给 main 加 flex-grow: 1 是最可靠的做法，前提是父容器已设 display: flex 和 flex-direction: column，且高度链完整。其他写法（比如只靠 margin-top: auto 或在 footer 上设 flex）容易失效或破坏滚动行为。
为什么 flex-grow: 1 必须加在 main 上，而不是 footer 或 body
因为“粘底”的本质是让中间内容区主动吸收剩余空间，把页脚往下推——不是页脚自己“贴”到底部。flex-grow: 1 只对 flex 子项生效，且只在主轴方向起作用；footer 如果也设了 flex-grow，它会和 main 争抢空间，导致页脚被拉高、内容被压缩。
-
main设flex-grow: 1→ 它会伸展填满所有可用垂直空间，自然把footer挤到最底 -
footer设flex-grow: 1→ 它会膨胀，可能盖住内容，或自身高度失控 -
body是容器，不能设flex-grow（它不是子项） - 用
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，但实际中更推荐显式写flex-grow: 1，避免flex-shrink在窄屏下意外压缩内容
min-height: 100vh 必须加在哪个元素上？加错就失效
必须加在 main 的**直接父容器**上，通常是 body 或某个外层 div.layout。如果只加在 html 或漏掉 body，flex-grow: 1 就没空间可撑——因为 flex 容器本身高度为 0。
- ✅ 推荐：给
body设min-height: 100vh; display: flex; flex-direction: column - ❌ 错误：只给
html设height: 100%，但body没设高度，flex 布局无法计算剩余空间 - ⚠️ 注意：若用自定义容器（如
<div class="layout">），必须确保它包裹了 <code>header、main、footer全部三个元素，且该容器自身有min-height: 100vh - iOS Safari 中
100vh可能包含收起的地址栏高度，造成轻微跳动；生产环境建议搭配100dvh（需检查兼容性）或 JS 降级 -
页脚飘在半空：父容器没设
min-height: 100vh，或main没设flex-grow: 1；检查是否误用了height: 100%而非min-height -
长页面时页脚遮挡正文：用了
position: fixed或absolute；立刻删掉，改用 flex 布局，footer必须留在文档流中 -
移动端页脚被键盘顶起/错位：
100vh在软键盘弹出时被重算；临时方案是监听resize事件，用document.documentElement.clientHeight动态更新容器高度 -
Flexbox 下滚动卡顿或内容截断：给
main错误加了overflow: hidden；应保留默认overflow: visible，让它自然滚动
常见错误现象与对应修复点
页脚“悬空”或“压住内容”，90% 是因为布局链断裂或定位干扰。这些坑几乎每个前端都踩过一次。
真正难的不是写对那几行 CSS，而是理解 flex 布局中“谁占空间、谁被推、谁决定高度”。一旦父容器高度链断开，或者某个元素脱离文档流，flex-grow: 1 就彻底失能——它不会报错，只会静默失效。
