必须给html和body设height: 100%，否则min-height: 100vh在旧版Chrome、Edge 16–18及iOS Safari中失效，导致页脚悬空；二者缺一不可，且不能用min-height: 100%替代。
必须给 html 和 body 设 height: 100%
不设这个，min-height: 100vh 在旧版 Chrome、Edge 16–18 和 iOS Safari 中会失效，导致页脚悬空。这不是可选优化，是硬性前提。
常见错误是只加了 body { height: 100% }，漏掉 html；或者误写成 min-height: 100% —— 后者在部分浏览器里根本不起作用。
-
html和body都要加height: 100%，顺序无关，但缺一不可 - 如果用了自定义容器（比如
.page），那html和body仍需设高，否则容器的min-height: 100vh无根可依 - 别依赖
box-sizing: border-box来“抵消”高度计算偏差——它不影响父级高度继承逻辑
flex: 1 必须用在内容区，不能用 flex-grow: 1 单独写
flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0 的简写，而老版本 Safari（≤15.3）和 IE 对 flex-grow 单独声明的支持不一致，会导致内容区不撑开、页脚上浮。
即使你只关心现代浏览器，也建议统一用 flex: 1，避免团队协作时因写法差异引入隐性 bug。
立即学习“前端免费学习笔记（深入）”；
- 内容区（如
main或.content）必须设flex: 1，不是flex: auto，也不是flex: 1 1 auto - 页头和页脚不需要额外设
flex-shrink: 0，它们默认就是，加了反而可能干扰高度计算 - 如果内容区有 padding 或 margin，不要把它当“额外空间”从
100vh里减掉——Flex 会自动处理流内间距
别用 position: sticky 或 position: absolute 模拟 Sticky Footer
position: sticky 的行为依赖滚动触发，语义是“滚动中粘住”，不是“布局占位”。在短页面里它会让 footer 悬在半空，在长页面里可能叠在内容上；position: absolute 则完全脱离文档流，一旦内容动态加载或字体缩放，footer 就会盖住文字或卡在顶部不动。
这两个方案看似代码少，实则排查成本极高：问题只在特定系统设置（如 macOS 大字号）、特定设备（iOS Safari）、或异步渲染阶段暴露。
-
position: sticky配bottom: 0在大多数浏览器里无效，且不支持 IE 和 Safari ≤15.2 -
position: absolute要求父容器必须是定位上下文（position: relative），且高度可控——这对现代 SPA 几乎不可控 - Vue/React 中初始
main高度为 0 时，absolute 的 footer 会直接贴顶，等 JS 渲染完才跳下去
Footer 高度不确定时，Flex 是唯一靠谱解法
当 footer 包含换行文字、响应式按钮、或 JS 动态插入内容时，它的高度是弹性的。calc(100vh - Xpx) 方案必须精确知道 X，而 X 会随断点、字体缩放、甚至屏幕阅读器设置变化——维护成本爆炸。
Flex 不关心 footer 多高，它只确保内容区占满剩余空间，footer 自然“被推到底部”。哪怕用户开启系统大字体，布局依然稳。
- 不要给
footer设固定height，让它用min-height或自然包裹内容 - 如果 footer 有
margin-top，不用手动补偿——Flex column 的流式排列会自动保留间隙 - Grid 方案虽简洁，但
minmax(0, 1fr)这个细节在 Safari ≤15.3 上极易遗漏，一旦出问题只在真机复现，调试极难
