Grid容器height:100%失效的根本原因是父级链中任一元素height为auto，导致百分比高度计算中断；必须确保html、body及所有中间父元素均显式设置height（如100%或100vh），并用开发者工具逐层验证computed height值。
Grid 容器本身不自动继承或撑开父元素的 height: 100%，因为它的高度默认由内容决定（height: auto），而 height: 100% 是个“依赖型”声明——它需要父级链上**每一层**都有明确的 computed height 才能生效。只要其中任意一层是 auto，整条链就断了，Grid 容器的 height: 100% 就被浏览器忽略。
检查 html 和 body 是否设了 height: 100%
这是最常漏掉的一环：html 和 body 必须同时设 height: 100%，否则所有后代的百分比高度都无源可溯。
-
html是body的父级，如果html没高度，body { height: 100% }就等于100% × 0px - 某些 CSS 重置库（如 Normalize.css）会悄悄重置
html高度，导致你写了body { height: 100% }却没用 - 临时验证：给
html, body加border: 1px solid red，看是否视觉上撑满视口
中间嵌套容器是否中断了包含块链路
哪怕 html 和 body 都设对了，中间某层用了 display: inline、display: table-cell 或 float，也会让该层失去“包含块”资格，导致子级无法继承高度。
- 用开发者工具逐层点开目标 Grid 容器的父级，在「Computed」面板里确认每层的
height值是否为具体像素或100vh；只要出现一个auto，就是断点 - 常见“隐形破坏者”：
.wrapper { display: flex; }后没设flex: 1或height: 100%，它自身仍为auto - Flex 子项中嵌套 Grid 容器时，记得给 Grid 容器加
min-height: 0，否则 Flex 默认的min-height: auto会卡住它
Grid 容器自身 height: 100% 是否被其他样式覆盖
即使父链通畅，height: 100% 也可能被同级更具体的规则覆盖，或与其它布局属性冲突。
立即学习“前端免费学习笔记（深入）”；
- 检查是否误加了
max-height: 0、overflow: hidden或position: absolute—— 这些会让 Grid 容器脱离文档流或压制高度计算 -
display: grid和height: 100%可以共存，但若同时写了grid-template-rows: 1fr，别指望它“自动补高”：1fr 只分配已有可用高度，不会反向撑开父容器 - 用
!important强行加height: 100%是无效的——问题不在优先级，而在计算基准缺失
为什么 min-height: 100vh 不是万能解
min-height: 100vh 看似绕过链路问题，但它把“填满父容器”偷换成了“填满视口”，在嵌套或动态场景下反而更难控。
- iOS Safari 地址栏收起/展开时，
vh值会重算，导致布局跳动 - Grid 容器若嵌套在
overflow: auto的滚动区里，100vh会让它溢出该区域，而不是填满父容器 - 有
position: fixed头部时，100vh仍按全屏算，常导致底部留白或遮挡 - 真正需要“嵌套填满”的场合（比如侧边栏内 Grid + Flex），
100vh会破坏层级语义，必须回归显式高度链
最容易被忽略的，是没打开开发者工具逐层点开看「Computed」→ height —— 别猜，直接看值。只要有一层是 auto，height: 100% 就注定失效，和 Grid 写得多漂亮没关系。
