flexbox 是最稳妥的 sticky footer 实现方式；grid 方案代码少但 safari 15.4 前有 minmax() 渲染 bug，易致页脚消失；需设 html/body 高度为 100%，容器用 flex column 和 min-height: 100vh，内容区用 flex: 1，footer 无需额外设置；grid 推荐 grid-template-rows: 1fr min-content + min-height: 100vh；position: sticky 不适用于 sticky footer，因其语义和行为均不匹配。
Flexbox 是目前最稳妥、浏览器兼容性最好的 Sticky Footer 实现方式；Grid 方案代码更少但 Safari 15.4 之前有 minmax() 渲染 bug，容易导致页脚消失或溢出。
Flexbox 实现必须设 html 和 body 的高度
否则 min-height: 100vh 在部分旧版 Chrome 和 Edge 中不生效，页脚会塌缩到内容末尾上方。
-
html和body都要加height: 100% - 包裹主内容和
footer的容器（比如.page）设display: flex+flex-direction: column+min-height: 100vh -
main或内容区加flex: 1，不是flex-grow: 1—— 后者在 IE/Edge 16–18 下行为不一致 -
footer不用设flex-shrink: 0，默认就是，加了反而可能干扰高度计算
Grid 方案里 grid-template-rows 别直接写 1fr
用 minmax(0, 1fr) 替代，否则长内容撑开时，某些 Safari 版本会崩溃网格项，页脚直接不可见。
- 推荐写法：
grid-template-rows: 1fr min-content，配合min-height: 100vh - 不要给
footer加align-self: end—— 它默认就在最后一行，额外设置会覆盖 grid 行对齐逻辑 - 如果项目需支持 Safari ≤15.3，这个方案就得退回到 Flexbox 或加 JS fallback
别用 position: sticky 实现 Sticky Footer
它依赖父容器滚动触发粘性行为，而 Sticky Footer 的核心诉求是「布局占位」：内容少时压底、内容多时随流下移。两者语义完全不同。
-
position: sticky在短页面里会让footer悬在半空，在长页面里可能叠在内容上 - 即使强行套用
top: auto+bottom: 0，也无法响应视口高度变化，且不支持 IE/旧 Safari - 真正需要滚动粘性的场景是「悬浮导航栏」或「表头冻结」，不是页脚
Flexbox 的容错率高，哪怕 footer 高度动态变化（比如响应式文字缩放），也能稳住布局；Grid 虽简洁，但那个 minmax(0, 1fr) 的细节，很容易被当成可选优化而忽略——一旦漏掉，问题只在特定 Safari 上复现，排查成本很高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
