父元素仅设置min-height时子元素min-height: 100%不生效问题咨询

核心规范依据 #

这个差异是CSS 2.1规范明确定义的高度计算规则导致的：

当元素使用百分比值作为高度/最小高度时，该百分比是相对于其父元素的显式定义的height属性值计算的。如果父元素未显式设置height属性（仅设置min-height/max-height不属于显式高度定义），且父元素非绝对定位，这个百分比值会被视为auto处理。

两种场景的差异说明 #

场景1：父元素仅设置min-height: 200px #

父元素的默认height属性值为auto，浏览器的高度计算逻辑如下：

1. 先基于父元素内部内容的实际高度计算出基础高度
2. 再将基础高度和min-height的值做对比，取较大值作为父元素的最终渲染高度
3. 子元素计算min-height: 100%时，仅能读取到父元素的height定义值auto，因此子元素的最小高度也会被处理为auto，仅适配自身内容高度，无法撑满父元素的最终渲染高度
   实际渲染效果：
   
   对应复现代码：

.parent {
  background-color: lightgreen;
  min-height: 200px;
}
.child {
  background-color: yellow;
  min-height: 100%;
}

<div class='parent'>
  <div class='child'>
    child
  </div>
</div>

场景2：父元素显式设置height: 200px #

父元素存在明确的height属性定义值，子元素计算min-height: 100%时可以直接基于这个200px的明确值计算，因此可以正常撑满父元素高度，符合预期。
预期渲染效果：

对应生效代码：

.parent {
  background-color: lightgreen;
  height: 200px;
}
.child {
  background-color: yellow;
  min-height: 100%;
}

如果需要保留父元素的min-height设置，同时让子元素撑满父容器，可以用以下两种常用方案：

方案1：使用Flex布局 #

给父元素添加Flex相关属性即可：

.parent {
  background-color: lightgreen;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.child {
  background-color: yellow;
  flex: 1; /* 父容器内有多个子元素时，可通过该属性分配高度占比 */
}

方案2：使用Grid布局 #

代码更简洁，Grid布局下子元素默认会撑满单元格高度：

.parent {
  background-color: lightgreen;
  min-height: 200px;
  display: grid;
}
.child {
  background-color: yellow;
}

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