grid子项height: 100%失效的根本原因是父级grid容器高度为auto，导致百分比无计算基准；需确保从html、body到各中间父级均设height: 100%，并用开发者工具逐层验证computed height是否为像素值。
Grid子项写height: 100%不起作用，大概率不是子项写错了，而是它根本没可算的高度来源——父级Grid容器自身高度为auto，导致百分比退化为无效声明。
检查 Grid 容器有没有明确高度
Grid子项的height: 100%只依赖**直接父容器（即Grid容器）的 computed height**。如果这个容器本身是height: auto（默认值），那子项的100%就等于0px或被忽略。
- 打开开发者工具，选中Grid容器（比如
.grid-container），看「Computed」面板里的height值：如果是auto，问题就在这里 - 常见诱因：
.grid-container只是普通div，没设高；或它嵌套在flex容器里，而该flex容器也没显式高度 - 别指望
grid-template-rows: 1fr能“自动撑高”容器——1fr分配的是容器的**已有可用高度**，不是创造高度
确认 html → body → 所有中间父级是否都传下了高度
Grid容器若要获得可计算的高度，往往需要从根开始建立高度链。只要其中一层是auto，整条链就断了。
-
html和body必须同时设height: 100%（只设body没用，因为html是它的父级） - 中间所有嵌套容器（如
.app、.main、.layout）也得加height: 100%或具体值（如min-h-screen） - 注意某些UI库或CSS reset会重置
html的height，务必用「Computed」面板确认它确实是像素值，而不是auto
警惕 display、float、position 破坏包含块
即使你写了height: 100%，如果Grid容器的父级用了某些显示模式，它就无法作为有效的“包含块”，子项的百分比高度照样失效。
- 父级设了
display: inline、display: table-cell或float：这些会让它失去作为高度参考容器的资格 - 父级是
position: absolute或fixed且没设高：绝对定位元素不参与文档流，其height: auto时，子项height: 100%会fallback到视口，而非预期父级 - 父级用了
transform：现代浏览器中，transform会创建新的包含块，但不会提供高度上下文，同样导致子项百分比失效
Grid 子项更推荐用 align-self 而非 height
Grid子项默认就具备拉伸行为：align-self: stretch（继承自align-items: stretch）。在Grid容器有明确高度的前提下，这比硬写height: 100%更可靠、更符合规范。
- 删掉子项的
height: 100%，确保它没被align-self: flex-start或min-height: 0覆盖掉拉伸行为 - 如果Grid容器是
grid-template-rows: 1fr，且自身高度已固定，子项会自然填满该轨道，无需额外设置高度 - 只有在子项内部还需嵌套其他百分比高度元素时，才需确保它自身有明确高度上下文——这时优先加固Grid容器的高度链，而不是在子项上叠
height: 100%
真正卡住排查的，往往是没打开开发者工具逐层点开看「Computed」里的height值。一眼就能看到哪一层是auto，比猜半天快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
