grid容器height:100%失效的根本原因是父级链中存在height:auto，需确保html、body及所有中间父级均设height:100%且无inline/table-cell/float等破坏包含块的属性。
Grid 容器设了 height: 100% 却没撑开，不是 CSS 写错了，而是浏览器根本算不出“100% 等于多少像素”——父级链中只要有一层 height 是 auto，整条链就断了。
html 和 body 没设 height: 100% 是最常见断点
哪怕你给 Grid 容器写了十遍 height: 100%，只要 html 或 body 缺一个，它就失效。因为 body 的 100% 是相对于 html 的，而默认 html 高度是 auto，结果就是 100% × 0px = 0px。
- 必须加这段重置：
html, body { height: 100%; margin: 0; padding: 0; } - 某些 CSS 重置库（如 Normalize.css）会悄悄覆盖
html高度，光写body { height: 100% }不够 - 临时验证：给
html和body加border: 1px solid red，看是否视觉上撑满视口
中间嵌套容器中断了包含块链路
即使 html 和 body 都设对了，中间某层用了 display: inline、display: table-cell 或 float，该层就失去“包含块”资格，子级的 height: 100% 会 fallback 到视口或直接忽略。
- Flex 容器里嵌套 Grid 时，常见坑：
.wrapper { display: flex; }后没设flex: 1或height: 100%，它自身仍是auto - 用开发者工具逐层点开目标 Grid 容器的父级，在「Computed」面板确认每层的
height值；只要出现一个auto，就是断点 - Grid 子项加了
position: absolute，它的height: 100%不再参照 Grid 容器，而是找最近非static定位祖先 —— 如果没找到，就 fallback 到视口
grid-template-rows: 1fr 不会反向撑高容器
1fr 只分配“已有可用高度”，不解决“容器本身多高”这个前提。如果 Grid 容器的 computed height 是 auto，那它的可用高度就是 0，1fr 行自然分不到空间。
-
grid-template-rows: 1fr+height: 100%子项 ≠ 自动填满：子项仍需依赖容器有明确像素高 - 想让某行“至少 200px”，优先写
grid-template-rows: minmax(200px, 1fr)，约束放在轨道层比靠子项min-height更可靠 - Flex 嵌套在 Grid 子项里会叠加失效：Grid 容器没高 → 子项没高 → Flex 容器没高 → Flex 项的
height: 100%还是 0
用 100vh 替代 100% 的真实代价
height: 100vh 能绕过高度链路，但它把“填满父容器”偷换成了“填满视口”，在嵌套或动态场景下反而更难控。
- iOS Safari 地址栏收起/展开时，
vh值会重算，导致页面跳动 - Grid 容器嵌套在
overflow: auto的滚动区里，100vh会让它溢出该区域，而不是填满父容器 - 有
position: fixed头部时，100vh仍按完整视口算，底部常留白或被遮挡 - 用户缩放页面（Ctrl+/Cmd+），
vh不随布局缩放，而百分比链路下的height: 100%更稳定
真正容易被忽略的，是没打开开发者工具逐层点开看 computed height —— 很多人卡在“明明写了 html, body { height: 100% } 还是不行”，其实问题常出在第三层，比如 .app 或 .layout 容器漏设了高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
