设置min-height:100%的子元素无法占满父元素高度问题求助

这是CSS百分比高度的标准规则导致的：

元素的百分比形式height/min-height，仅在父元素显式设置了固定height属性时，才能基于父元素高度计算对应值。如果父元素仅设置min-height而无显式height，子元素的百分比高度规则会直接失效，默认按内容高度渲染。

你的代码里，最外层红色div显式设置了height: 800px，所以中间橙色div的min-height:100%可以正常继承红色div的高度撑到800px；但橙色div本身没有设置显式的height属性，所以最内层绿色div的min-height:100%找不到可参考的父级显式高度，自然无法占满橙色父元素的空间。

两种方案都符合CSS规范，不属于hack写法：

• 方案1：补充高度继承声明
  给中间的橙色div额外加height: 100%即可。因为橙色div的父级已经有显式高度，这个100%可以正常生效，同时可以保留原有的min-height避免内容溢出时被截断：

<div style={{ height: "800px", backgroundColor: "red" }}>
  <div style={{ height: "100%", minHeight: "100%", backgroundColor: "orange" }}>
    <div style={{ minHeight: "100%", backgroundColor: "green" }}>
      This has content
    </div>
  </div>
</div>

• 方案2：Flex布局适配（更推荐）
  用弹性布局的自动占满特性实现，不需要依赖百分比高度规则，适配性更强：

<div style={{ height: "800px", backgroundColor: "red" }}>
  <div style={{ minHeight: "100%", backgroundColor: "orange", display: "flex", flexDirection: "column" }}>
    <div style={{ flex: 1, backgroundColor: "green" }}>
      This has content
    </div>
  </div>
</div>

如果后续橙色div内需要新增其他固定高度的模块，绿色区域会自动计算并占满剩余空间，无需手动调整百分比。

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