flexbox是实现sticky footer最可靠方案，需设html和body为height:100%、用.page容器替代body设flex、main用flex:1而非flex-grow:1、禁用position:sticky。
Flex 布局是目前实现 Sticky Footer 最可靠、兼容性最好、且无需 JS 的方案；只要高度链完整、flex 分配明确，页脚就能在内容少时贴底、内容多时随流下移——不遮挡、不悬空、不依赖滚动触发。
为什么不能直接对 body 设 display: flex
部分 Safari（尤其是 ≤15.3）和旧版 Edge 不支持对 body 元素应用 display: flex，会导致布局完全失效，页脚塌缩到内容末尾上方。React/Vue 项目中更危险：#app 是实际根容器，body 往往只是个空壳，设了也白设。
- 必须用一个显式容器（如
.page或#app）包裹header、main、footer -
html和body都要加height: 100%，否则min-height: 100vh在旧 Chrome/Edge/Safari 中会降级为auto - 清掉
body默认的margin: 8px，否则会撑出不可见空白
main 区域必须用 flex: 1，不是 flex-grow: 1
flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0 的简写，它能确保内容区真正“抢占”剩余空间；而单独写 flex-grow: 1 在 IE/Edge 16–18 下行为不一致，可能导致页脚上浮或错位。
- 如果中间有多个区块（如
aside、section），建议统一用flex: 1控制主体区域，而不是只靠margin-top: auto -
flex: 1对响应式文字缩放、动态高度变化（如字体大小被系统放大）天然鲁棒；flex-grow: 1则可能因基线计算偏差导致高度塌陷
为什么禁用 position: sticky 实现 Sticky Footer
position: sticky 的语义和行为完全不匹配 Sticky Footer 的需求：它依赖父容器滚动来触发“粘性”，而页脚天生就在 DOM 末尾，一加载就在视口底部，浏览器多数时候直接降级为 static，根本看不出效果。
- 短页面里，
footer可能悬在半空；长页面里，可能叠在内容上 - 即使硬加
bottom: 0，也无法响应视口高度变化（比如横竖屏切换、缩放），且不支持 IE 和 Safari ≤15.3 - 真正适合
position: sticky的是悬浮导航栏、冻结表头这类「滚动中吸附」场景，不是页脚
Flex 方案下页脚被顶出视口或出现滚动条怎么办
现象：页脚底部有一截空白，或者滚动条出现但页脚没贴底。这几乎全是高度计算冲突导致的——常见于嵌套 transform、overflow: hidden 容器，或 footer 内部用了 flex + align-items: center 等未设 min-height 的组合。
- 检查是否所有父级容器（包括
.page的直接父元素）都未设height: 0或overflow: hidden -
footer内部若含弹性子项，需确保其自身有明确最小高度（如min-height: 60px），否则 Flex 容器可能压缩至内容高度 - Safari ≤15.3 对
minmax()有 bug，如果你混用了 Grid 方案又没兜底，问题只在特定设备复现，排查成本极高
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
