设置min-height:50vh的section子div设height:100%无法撑满父容器？

嘿，这个问题我之前踩过坑，确实有点反直觉！核心原因其实和CSS中百分比高度的计算规则直接相关：

• 当你给子元素设置height: 100%时，它的高度是基于父元素的**计算高度（computed height）**来计算的，而不是min-height属性值。
• 如果父元素只设置了min-height（没有明确的height值），父元素的计算高度其实是由内部内容撑开的——也就是说，父元素的实际高度会等于子元素内容的高度（如果子元素内容不够多的话），这时候子元素的height:100%就等于它自己的内容高度，自然无法撑满父元素的min-height区域。

举个直观的代码例子：

section {
  min-height: 50vh; /* 仅设置最小高度，无明确height值 */
  background: #eee;
}
section div {
  height: 100%; /* 这里的100%参照的是section的计算高度，也就是div自身内容的高度 */
  background: #ccc;
}

这时候div的高度只会和它的内容一样高，根本达不到50vh的最小高度要求。

为什么绝对定位的方法能生效？ #

当你给父元素设置position: relative，子元素设置position: absolute并把top:0; bottom:0; left:0; right:0时，绝对定位元素的高度计算逻辑发生了变化：它不再参照父元素的计算高度，而是参照父元素的**包含块（containing block）**的尺寸。而包含块的尺寸会考虑父元素的min-height，所以子元素会被拉伸到填满父元素的最小高度区域。

更现代的替代方案 #

其实不用绝对定位也能轻松解决，比如用Flexbox布局：

section {
  min-height: 50vh;
  display: flex; /* 开启flex布局 */
}
section div {
  flex: 1; /* 让子元素自动占据父容器的剩余空间 */
}

这种方法更符合现代CSS的布局思路，代码也更简洁易维护。

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