为什么 inline-block 不会扩展到父母计算的高度？ [复制]答案

【问题标题】：Why inline-block does not expand to parents computed height? [duplicate]为什么 inline-block 不会扩展到父母计算的高度？ [复制]
【发布时间】：2026-01-16 08:20:03
【问题描述】：

在下面的代码中，孩子的(inline-block) 宽度扩展到其父计算宽度的 100%，但我不知道为什么 .child 的 height 没有扩展到 .parent's 计算高度。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.ancestor {
  height: 250px;
  border: 1px solid green;
}

.parent {
  display: block;
  padding: 20px;
  border: 1px solid #474747;
  background-color: #fff;
}

.child {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: pink;
}

<div class="ancestor">
  <div class="parent">
    <p class="child">
      Lorem ipsum dolor sit amet, consectetur adipisicing.
    </p>
  </div>
</div>

我更感兴趣的是了解这种行为背后的逻辑，而不是解决方案。有人可以解释一下这种情况。

谢谢

【问题讨论】：

因为流入元素的百分比高度基于父元素的高度。而且由于您没有在父级上定义高度，因此它计算为auto。请参阅我在副本中的答案以获得完整的解释：Working with the CSS height property and percentage values.

标签： css box-sizing

【解决方案1】：

height: 100%; 仅在父元素具有定义的高度设置时才有效。如果该高度设置也是一个百分比值，那么祖父母也需要一个定义的高度，这同样适用于直到 body 和 html 的所有祖先，除非其中一个具有绝对值的高度设置（px， em 或类似的）或vh，这是相对于视口的。

【讨论】：