关键配置是grid-template-rows: 1fr min-content，其中1fr使内容区占满剩余空间，min-content确保页脚按真实内容高度渲染且不参与弹性分配，配合min-height: 100vh及html/body height: 100%才能实现可靠粘性页脚。
grid-template-rows: 1fr min-content 是核心配置
Grid 实现粘性页脚的关键不是“撑满”，而是让内容区主动吸收剩余空间，同时让页脚保持自身自然高度。必须用 grid-template-rows: 1fr min-content，不能写成 1fr auto 或 1fr fit-content——min-content 才能确保页脚高度完全由内容决定，且不参与弹性分配。
常见错误是直接写 1fr auto，结果在 Safari ≤15.3 中页脚高度被压缩为 0；或者写 1fr 60px，导致响应式缩放时文字溢出或留白。
-
1fr分配所有剩余视口空间给内容区（比如main） -
min-content让页脚按文字行高、padding、border 等真实尺寸渲染，不拉伸也不截断 - 必须配合
min-height: 100vh（不是height: 100vh），否则短内容时页脚会上浮
html 和 body 必须设 height: 100% 才能传递高度基准
Grid 容器若直接设在 body 上，而 html 或 body 缺少 height: 100%，min-height: 100vh 就会退化为内容高度——页脚立刻塌缩到内容末尾上方，尤其在旧版 Chrome 和 Edge 中高频复现。
这不是可选优化，是硬性前提。漏掉任意一层，整个 Grid 布局就失效。
-
html { height: 100% }—— 提供根高度锚点 -
body { height: 100%; margin: 0 }—— 清除默认 margin 干扰，并继承高度 - 更稳妥的做法：套一层
.page容器，把display: grid和min-height: 100vh都加在它上面，避开部分 Safari 对body的 flex/grid 支持缺陷
Safari 15.4 之前必须避免 minmax(0, 1fr)
很多教程推荐用 grid-template-rows: minmax(0, 1fr) min-content 来增强容错，但 Safari ≤15.3 会直接崩溃网格布局，页脚消失不见——不是隐藏，是 DOM 渲染失败，开发者工具里都看不到该元素。
这个 bug 极难排查，因为只在特定系统版本触发，本地开发测不到，上线后用户反馈才暴露。
- 安全写法就是
1fr min-content，不加minmax() - 如果项目必须支持 Safari ≤15.3，建议降级到 Flexbox 方案，或加 JS 检测后动态切换 class
- 别给
footer加align-self: end——它默认就在最后一行，加了反而覆盖 Grid 行对齐逻辑
别用 position: sticky 模拟粘性页脚
position: sticky 的语义是「滚动中吸附」，而粘性页脚的核心诉求是「布局占位」：内容少时压底、内容多时随流下移。两者行为根本冲突。
强行用 position: sticky; bottom: 0 会导致：
- 短页面里页脚悬在视口中间，离底部有空白
- 长页面里页脚可能叠在内容上，尤其当父容器没设
overflow: clip - 无法响应视口 resize，比如横竖屏切换后位置错乱
- IE 和 Safari ≤14 完全不支持，降级为 static 后页脚直接回到 DOM 末尾（即内容之后），失去“压底”效果
真正需要 position: sticky 的场景是悬浮导航栏或冻结表头，不是页脚。Grid 方案的简洁性值得保留，但那个 1fr min-content 的写法，一个字符都不能错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
