为什么CSS Grid中的百分比高度在容器未指定时失效？-css教程-PHP中文网

grid子项height: 100%无效的根本原因是.grid-container自身高度为auto，导致100%×0px=0px；必须显式设置其height（如height: 100vh），且需排查中间父层是否因display、position等中断高度继承链。

为什么css grid中的百分比高度在容器未指定时失效？

Grid子项写height: 100%却没效果，不是你漏写了什么，是.grid-container自己根本没高度——浏览器连“100%等于多少像素”都算不出来，直接按0px渲染。

Grid容器必须有明确的`height`值，`grid-template-rows`不等于“给容器赋高”

grid-template-rows: 1fr 2fr只分配容器内部空间，不定义容器自身高度。如果.grid-container的computed height是auto（开发者工具里一眼可见），那所有子项的height: 100%就等于100% × 0px = 0px。

别指望align-items: stretch能救——它只对无显式高度约束的子项生效；一旦子项写了height: 100%，就立刻切换为依赖父容器像素高度
min-height: 400px对height: 100%完全无效：它只认height，不认min-height
常见错误配置：.grid-container { display: grid; grid-template-rows: 1fr; } → 缺少height声明，链路从第一层就断了

为什么`html, body { height: 100% }`还不够？中间父层可能悄悄断链

即使根级设了height: 100%，只要中间某一层用了display: inline、float、position: absolute或display: table-cell，它就失去“包含块”资格，导致高度继承中断。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

用开发者工具逐层点开目标元素的父节点，在「Computed」面板看height值：出现auto就是断点
尤其注意框架注入的样式，比如某些 UI 库默认给html加height: auto，覆盖你的规则
.wrapper加了position: relative但没设height？它的子项height: 100%照样算出0px

绝对定位子项在Grid里更危险：包含块可能根本不是Grid容器

position: absolute元素的height: 100%不看DOM父级，而是找最近的非static定位祖先。如果.grid-container没加position: relative，或者加了但自身height仍是auto，那百分比就回退到视口——你写的height: 50%实际是50vh。

修复优先级：先给.grid-container加position: relative和明确height（如height: 100vh或height: 500px）
Safari 14–15.6有兼容问题：即使父级height: 100vh，子项height: 100%仍可能被忽略；可临时加min-height: 0强制触发
更稳方案：放弃height，改用top: 60px; bottom: 20px;——完全绕过高度继承链

嵌套Flex时失效风险叠加，`flex: 1`比`height: 100%`更可靠

Grid子项里再套Flex，height: 100%要连过两关：Grid容器得有高 → 子项得拉满 → Flex容器得有高 → Flex项才能height: 100%。任一环是auto，后面全归零。

Grid子项内需滚动区域？优先用flex: 1 + min-height: 0，而不是height: 100%
flex: 1从flex-basis: 0开始拉伸，吃掉剩余空间，不依赖父容器有没有显式height
若必须用height: 100%，确保父容器是display: flex或display: inline-flex，并手动覆盖min-height: 0（某些框架会注入min-height: 0压制拉伸）