React组件无法占满浏览器全屏高度 CSS配置无效问题求助

CSS 中百分比高度生效的核心前提是：父元素必须有明确赋值的height属性。你当前给#ReactRoot设置的是min-height: 100vh，仅为最小高度约束，不属于明确的高度赋值，因此子元素设置height: 100%时无法获取到有效的高度参考，自然不会生效。
另外 public 文件夹下的 index.css 未生效，是因为你没有在 index.html 中手动引入该 CSS 文件，默认 React 脚手架只会处理 src 目录下被 import 引入的静态资源。

方案1：修改根元素高度配置（适配性最强） #

将 index.css 的配置修改如下：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#ReactRoot {
  height: 100vh; /* 替换原min-height配置，明确指定高度 */
  overflow-y: auto; /* 内容超过视口高度时自动出现滚动条，不会截断长内容 */
}

修改完成后，所有层级的元素设置height: 100%都会正常基于父元素高度计算，你原本使用的display: grid+gridTemplateRows: '1fr'布局也会正常占满容器高度。

方案2：通过Flex布局传递高度（无需修改min-height） #

如果需要保留#ReactRoot的min-height配置，可以给根元素新增flex相关属性：

#ReactRoot {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

后续#ReactRoot的直接子元素如果需要占满全部剩余高度，不需要设置height，直接添加flex: 1属性即可；内层元素如果需要继续占满父元素高度，也可以用同样的flex逻辑向下传递，和grid的1fr分配逻辑一致，不需要依赖百分比高度。

方案3：单组件直接使用vh单位 #

如果只有个别组件需要占满全屏高度，不需要全链路适配高度，也可以直接给目标组件设置height: 100vh，配合box-sizing: border-box抵消内边距、边框的高度影响即可。

内容的提问来源于stack exchange，提问作者Vlad SD