Flex布局是实现Sticky Footer最可靠的方式：需设html/body高度基准、清空body margin、用flex容器包裹并设min-height:100vh、main用flex:1、footer不加flex-shrink:0，禁用position:sticky。
Flex 布局是目前实现 Sticky Footer 最可靠、兼容性最好、逻辑最清晰的方式。只要高度链完整、flex 分配明确，就能稳住页脚：内容少时贴底，内容多时随流下移，不遮挡、不悬空、不依赖 JS。
必须设 html 和 body 的高度基准
漏掉这一步，min-height: 100vh 在旧版 Chrome/Edge/Safari 中会失效，页脚直接塌缩到内容末尾上方。
-
html和body都要加height: 100%（或至少min-height: 100vh），不能只设其中一个 - 清掉
body默认的margin，否则会撑出额外空白 - 包裹主结构的容器（比如
.page或直接用body）必须设display: flex; flex-direction: column; min-height: 100vh - 别对
body直接设display: flex后就不管了——部分 Safari 版本不支持对body的 flex 布局，推荐套一层容器更稳妥
main 区域用 flex: 1，不是 flex-grow: 1
flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0 的简写，它能确保内容区真正“抢占”剩余空间；而单独写 flex-grow: 1 在 IE/Edge 16–18 下行为不一致，可能导致页脚上浮或错位。
-
main或内容容器必须是 flex 容器的**直接子元素**，且排在header之后、footer之前 - 不要给
footer加flex-shrink: 0——它默认就是，加了反而可能干扰高度计算 - 如果中间插入了多个区块（如
aside、section），建议统一用flex: 1控制主体区域，而不是只靠margin-top: auto
别碰 position: sticky 实现 Sticky Footer
position: sticky 的语义和行为完全不匹配 Sticky Footer 的需求：它需要滚动触发“进入视口”，而 footer 天然就在 DOM 末尾，一加载就在视口底部，浏览器多数时候直接降级为 static，你根本看不出效果。
立即学习“前端免费学习笔记（深入）”；
- 在短页面里，
footer可能悬在半空；在长页面里，可能叠在内容上 - 即使硬加
bottom: 0，也无法响应视口高度变化，且不支持 IE 和旧 Safari - 真正适合
position: sticky的是悬浮导航栏、冻结表头这类“滚动中吸附”的场景，不是页脚
最容易被忽略的是 Safari ≤15.3 对 minmax() 的 bug——如果你混用 Grid 方案又没兜底，问题只在特定设备复现，排查成本极高。Flex 方案虽代码略多，但容错率高，哪怕 footer 高度因响应式文字缩放而动态变化，也能稳住布局。
