最稳妥方案是父容器设flex-direction: column和明确高度（如100vh），顶部固定height，中间用flex: 1（等价于flex: 1 1 0）撑满剩余空间，底部不设height自然贴底。
顶部固定高度、底部自适应的 flex column 布局怎么写
直接用 flex-direction: column + flex: 1 是最稳妥的方案，不需要 JS、不依赖绝对定位，兼容性到 Chrome 21+/Firefox 20+ 都没问题。
关键不是“怎么让底部自适应”，而是“怎么让中间区域撑满剩余空间”——顶部固定后，剩下的高度必须由中间容器吸收，底部才能自然贴底。
- 顶部容器设固定
height或min-height（比如60px） - 中间容器加
flex: 1（等价于flex: 1 1 0），它会抢占所有剩余空间 - 底部容器不设高度，或设
min-height，内容多时自动撑高 - 父容器必须有明确高度（如
100vh或100%），否则flex: 1无参照
.container {
display: flex;
flex-direction: column;
height: 100vh; /* 必须有高度约束 */
}
<p>.header {
height: 60px;
background: #333;
}</p><p>.main {
flex: 1; /<em> 吃掉 header 和 footer 之间的所有空间 </em>/
overflow-y: auto; /<em> 内容超长时滚动，不影响布局 </em>/
}</p><p>.footer {
/<em> 不设 height，靠内容撑开；也可设 min-height: 40px </em>/
background: #eee;
}为什么 flex: 1 比 flex-grow: 1 更可靠
flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0 的简写，而单独写 flex-grow: 1 时，flex-basis 默认是 auto，会导致它先按内容高度计算基准，再放大——这在内容为空或高度波动时容易出错。
设 flex-basis: 0（即 flex: 1）才真正实现“无视自身内容，纯按剩余空间分配”。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
flex-grow: 1→ 中间区域可能收缩或溢出 - 正确写法：
flex: 1或显式写flex: 1 1 0 - 如果中间要最小高度保护，用
min-height: 0配合flex: 1（防止 flex item 默认最小高度干扰）
滚动区域该加在 main 还是 body 上
滚动必须加在 .main 内部容器上，而不是整个 .container 或 body。否则顶部和底部会一起滚动，失去“顶部固定”的意义。
- ✅ 正确：给
.main设overflow-y: auto，并确保其min-height: 0（防 flex 基线干扰） - ❌ 错误：给
.container加overflow: auto→ 整体滚动，header/footer 跟着动 - ⚠️ 注意：若
.main里嵌套了display: flex子元素，子元素也要设min-height: 0才能继承滚动约束
移动端 Safari 下 flex: 1 不生效的常见原因
iOS Safari（尤其是旧版本）对 100vh 解析不稳定（地址栏收放会影响实际高度），导致 flex: 1 缺少可分配空间。
- 临时修复：用
height: 100%替代100vh，并确保所有父级（html,body）都设height: 100%和margin: 0 - 更稳方案：用
env(safe-area-inset-bottom)+calc()补齐底部安全区（如果 footer 要贴底） - 调试技巧：在 Safari 开发者工具中检查
.container实际渲染高度是否为预期值
最易被忽略的一点：flex column 布局中，只要中间区域没设 flex: 1，或者父容器没给明确高度，整个逻辑就断了——不是代码写得不够花哨，而是这两个条件缺一不可。
