最简可靠做法是给main加flex-grow:1并配合父容器设min-height:100vh；因flex-grow作用是抢占剩余空间，加在main上可撑开中间区域推下页脚，加在footer上则会拉伸遮挡内容。
直接给 main 加 flex-grow: 1 是最简可靠的起点，但必须配合 min-height: 100vh 在父容器上，否则它根本不会生效。
为什么 flex-grow: 1 必须加在 main 上，而不是 footer
因为 flex-grow 的作用是“抢占剩余空间”，不是“沉到底部”。给 footer 加 flex-grow: 1，它会把自己拉高盖住内容；而给 main 加，它才真正吃掉 header 和 footer 之间的所有空白，把页脚往下推。
常见错误现象：
- 页脚被撑得又高又宽，甚至遮挡正文
- 页脚位置不动，依然飘在半空
正确写法示例：
main {
flex-grow: 1;
}
footer {
/* 不要设 flex-grow，保持默认 flex: none */
}
min-height: 100vh 必须加在哪个元素上
必须加在 display: flex 的直接父容器上——通常是 body，但 React/Vue 项目中更可能是 #root 或 #app。只给 html 设 height: 100%、漏掉 body，或把 min-height 错加在 main 自身上，都会导致高度链断裂，flex-grow 失效。
实操建议：
- 若结构是
<div id="root">...</div>，则min-height: 100vh和display: flex都要落在#root上 -
html和body只需重置margin: 0，无需设高度 - 避免在
body上用height: 100vh，它会截断溢出内容
移动端 Safari 中 100vh 跳动怎么办
iOS Safari 的 100vh 会包含收起的地址栏高度，页面滚动时视口高度变化，造成页脚轻微上跳。这不是 bug，而是行为差异。
可选方案：
- 改用
100dvh（dynamic viewport height），它始终反映当前可视区域高度，但需检查兼容性（Chrome 105+/Safari 16.4+/Firefox 110+） - JS 降级：监听
resize，动态设置min-height，但仅在必要时使用 - 对大多数项目，
100vh+ 合理 padding-bottom 已足够稳定
比 flex-grow: 1 更鲁棒的替代方案：margin-top: auto
当页面结构复杂（比如 header 下接多个动态卡片、广告位、折叠面板），flex-grow: 1 容易因兄弟元素高度异常而失效；而 margin-top: auto 只关心“这是最后一个想沉底的元素”，完全不依赖中间区块数量或高度。
只需：
- 父容器设
display: flex; flex-direction: column -
footer加margin-top: auto - 不要和
flex-grow同时用在一个元素上，后者会覆盖前者
这个写法兼容 Chrome 29+ / Firefox 20+ / Safari 9+，且中间区块增删、高度变化都不影响页脚位置。
最容易被忽略的一点：页脚内部文字垂直居中不是自动的。如果 footer 有固定高度，必须单独启用 Flex 布局并设 justify-content 和 align-items，否则内容会贴顶或贴底，看起来像没“粘住”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
