grid容器需有明确高度（如height: 100vh或逐层height: 100%），否则子项height: 100%失效；1fr依赖容器可用高度，auto高度下无法计算；100vh在嵌套滚动、fixed布局等场景易出错。
Grid容器本身没高度，子项的height: 100%就是空气
子项写height: 100%却没效果，不是子项错了，是 Grid 容器自己没高度。CSS 百分比高度必须有明确的像素基准才能计算，而grid-template-rows: 1fr 2fr只分配内部空间，不给容器“赋高”。只要 Grid 容器的 computed height 是 auto（开发者工具里一查就知），所有子项的height: 100%都会退化为内容撑开——哪怕你写了十层嵌套，中间断一层，后面全白搭。
常见错误链：html没设高 → body的height: 100%无源可溯 → 中间某个.wrapper用了display: inline或float → 包含块失效 → Grid 容器height算出来还是auto。
height: 100%和1fr不是一回事，别指望它们互相救场
1fr行高依赖的是 Grid 容器的**可用高度**，而这个可用高度必须是浏览器能算出的具体像素值。如果 Grid 容器本身靠height: 100%继承而来，但父级是auto，那它的“可用高度”就是 0，1fr自然分不到空间，第二行直接塌缩。
- 正确做法：Grid 容器必须有显式高度上下文，比如
height: 500px、height: 100vh，或从根开始逐层height: 100% - 别混用
height: 100%和min-height: 400px——height: 100%只认height，不认min-height - 如果子项内还要嵌 Flex 布局，
height: 100%会再叠一层失效风险：Grid 容器没高 → 子项没高 → Flex 容器没高 → Flex 项的height: 100%还是 0
用100vh不是万能解，反而容易在嵌套滚动中翻车
100vh确实能绕过继承链，让 Grid 容器立刻有高度，但它绑定的是视口，不是父容器。真实项目里，它常在这些地方崩：
- iOS Safari 地址栏收起/展开时，
100vh会重算，页面突然跳动 - Grid 容器放在
overflow: auto的滚动区里，100vh会让它溢出该区域，而不是填满父容器 - 页面有
position: fixed头部时，100vh仍按完整屏幕算，底部常留白或被遮挡 - 用户缩放页面（Ctrl + / Cmd +），
vh不随布局缩放，但百分比链路下的height: 100%更稳定
真正需要“填满父容器”的场景（比如 Grid 子项、Flex 区域），100vh会破坏层级关系，此时必须回归高度继承链。
最常被忽略的不是怎么写，而是没打开开发者工具逐层看Computed height
很多人卡在“我明明写了html, body { height: 100% }”，结果还是无效。问题往往出在第三层：比如.main用了display: table-cell，或.content加了position: absolute，导致它不再是子元素的包含块，height: 100%自动回退到初始包含块（通常是html）。
操作建议：
- 用开发者工具选中目标 Grid 容器 → 切到「Computed」面板 → 看
height是不是具体数值（如720px）；如果是auto，说明链路断了 - 从
html开始，逐层点开父元素，确认每一级的height都显示为像素值 - 检查是否有
display: inline、display: table-cell、float、position: absolute等样式，它们会让父元素失去“包含块”资格
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
