最稳妥做法是设 min-height: 100vh 并清除 html、body 默认 margin，确保祖先链无高度干扰；grid-template-rows: auto 1fr auto 可实现头部固定+主体占满+底部固定布局。
Grid如何让容器撑满整个视口高度
直接设 height: 100vh 是最常见也最稳妥的做法，但要注意它不是“自动继承父高”，而是基于视口本身计算。如果父元素有 padding、border 或 margin，或者用了 box-sizing: content-box（默认值），就可能造成滚动条或内容溢出。
-
min-height: 100vh比height: 100vh更安全，尤其当内容超过一屏时不会截断 - 避免对
html或body直接设height: 100%——它依赖父级高度，而html的父是视口，但规范中不保证 100% 被识别为 vh - 若用
display: grid的容器需填满视口，必须确保其自身已具备全高：即祖先链上所有元素（包括html,body）都无意外的高度限制或边距干扰
grid-template-rows: 1fr 不起作用？检查父容器是否真有高度
1fr 是按剩余可用空间分配比例，但它不会凭空创造空间——如果父容器高度为 auto（比如没设 min-height: 100vh），那“剩余空间”就是 0，1fr 就塌成一条线。
- 典型错误：只写
grid-template-rows: 1fr，但外层div没设高度，结果网格项看不见 - 正确链路：
html→body→ 根容器，三者都要清除默认 margin，并设min-height: 100vh - 移动端 Safari 对
100vh有兼容问题（地址栏缩放时高度抖动），可临时用100dvh替代（支持 Chrome 105+/Safari 16.4+）
如何用 Grid 实现「头部固定 + 主体占满剩余高度 + 底部固定」布局
这是全屏页面最典型的三段式需求，靠 grid-template-rows 配合 fr 单位就能解，不需要 JS 计算高度。
body {
margin: 0;
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
-
auto用于头部和底部，按内容自然撑开 -
1fr分配所有剩余空间给主体，哪怕内容很少也会拉满 - 若主体内部也要滚动（如长列表），给主体元素加
overflow-y: auto，别忘了设min-height: 0（否则1fr容器可能不收缩，导致滚动失效） - 避免在主体里再套一层
display: flex; flex-direction: column—— 多余嵌套容易触发渲染 bug，尤其在旧版 Firefox 中
Grid 填满视口时的常见视觉错觉与调试技巧
看起来“没填满”，大概率不是 Grid 写错了，而是被其他样式悄悄抵消了。比如 font-size 改变行高、line-height 溢出、或 margin-collapse 导致顶部空白。
- 用浏览器开发者工具选中根容器，看 computed height 是否真为预期值（如 720px）
- 检查
body是否有默认margin: 8px（Chrome 默认值），这个会把整个网格往下推 - 如果用了
place-items: center却发现内容偏上，说明容器高度不足，center无处可居——先确认高度，再居中 - 禁用所有自定义 CSS，只留 Grid 相关规则，逐步加回其它样式，定位干扰源
body 的默认 margin 和 box-sizing 在不同浏览器中的细微差异。哪怕 Grid 写得完全正确，这两点没清干净，就会白忙活半天。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
