为何设置height:100%与position:absolute后，.test2高度为204px而非200px？

问题背景 #

为容器内的.test元素设置了200px高度，容器自适应内容高度为200px。添加.test2元素并设置height:100%时无效果，因为height:100%依赖父元素设定的高度，但父容器未设置高度。设置position:absolute后，百分比高度生效，但.test2高度显示为204px而非预期的200px。

需要解答两个问题：

1. 多出的4px来自何处？
2. 为何父容器未设高度，添加position:absolute后height:100%能生效？

附代码 #

CSS代码

* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

div {
  display: inline-block;
  width: 50px;
}

.container {
  position: relative;
  width: 100%;
}

.test {
  height: 200px;
  background-color: aqua;
}

.test2 {
  height: 100%;
  position: absolute;
  background-color: blue;
}

HTML代码

<div class="container">
  <div class="test"></div>
  <div class="test2"></div>
</div>

问题解答 #

1. 多出的4px来自何处？

根源是inline-block元素的基线对齐特性：

• 所有div被设置为display: inline-block，.container作为父级div，默认采用基线对齐规则。
• .test作为inline-block元素，默认会与容器的基线对齐，而基线下方会预留一段用于容纳文字下行部分（比如字母g、y的底部）的空间，这段空间高度约为4px。
• 因此.container的实际高度是.test的200px加上这段4px的预留空间，.test2设置height:100%后自然继承了204px的高度。

要消除这4px，只需给.test添加vertical-align: top或vertical-align: bottom即可，这样会取消基线对齐的预留空间。

2. 为何父容器未设高度，添加position:absolute后height:100%能生效？

普通元素的height:100%要求父元素必须显式设置height属性，否则无法计算百分比高度，但绝对定位元素的规则完全不同：

• 绝对定位元素脱离正常文档流，它的百分比高度是相对于最近的非static定位祖先元素的包含块计算的。
• 这里.container设置了position: relative，作为.test2的定位容器，它的包含块高度会根据自身内容（即.test撑开的高度）自动计算，不需要显式设置height属性。
• 因此.test2的height:100%可以基于这个自动计算的包含块高度直接生效。

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