Question

当您给父母的最小身高和给孩子的身高百分比时，孩子没有任何身高。

.p {
  min-height: 50vh;
  background-color:beige;
  
}

.c {
  height: 50%;
  background-color: red;
}

<div class="p">
  <div class="c"> hi </div>
</div>

但是，如果您给父母明确的身高，即使身高小于min-height，孩子也会获得身高，但这是相对于min-height而不是所提供的身高（当height

.p {
  min-height: 50vh;
  height: 1px;
  background-color:beige;
  
}

.c {
  height: 50%;
  background-color: red;
}

<div class="p">
  <div class="c"> hi </div>
</div>

首先，我想了解这种行为
如何以百分比为单位给孩子的身高，且只有父代的身高为最小高度

Answer 1

以下是百分比高度的工作原理https://developer.mozilla.org/en-US/docs/Web/CSS/height，我正在使用此链接，因为如另一个答案中所述，规格链接https://www.w3.org/TR/CSS22/syndata.html#value-def-percentage

更容易找到

相对于生成的盒子的包含块的高度计算百分比。 如果未明确指定包含块的高度（即，它取决于内容的高度），并且该元素的位置不是绝对的，则该值将自动计算。根元素上的百分比高度为相对于初始包含块。

您必须向下滚动才能找到此标签（“规范”部分）

在您的情况下，由于您未指定父级的身高，因此您的子级身高百分比将自动计算，这就是您在示例中看到的高度

这是在不指定父级高度且绝对位置的情况下如何获得百分比高度的方法

.p {
  min-height: 50vh;
  background-color:beige;
  position: relative;
}

.c {
  height: 50%;
  background-color: red;
  position: absolute;
}

<div class="p">
  <div class="c"> hi </div>
</div>

注意-父母的身高=最小身高与身高之间的较大值，这就是第二种情况起作用的原因

老实说，增加一个1px的高度作为一种变通方法，以获得一个为孩子工作的百分比而无需定义固定的高度（因为最小高度被覆盖）是一个很好的解决方法。

Answer 2

在第一种情况下，您没有为父级指定高度，因此根据规范height doc，子级的高度将设置为自动而不是百分比。

如果包含块的高度为未明确指定，并且此元素未绝对定位，则该值将计算为 auto 。

在第二种情况下，您可以设置特定的高度和最小高度。根据关于min-height

的另一个规范

每当min-height大于max-height或height时，元素的高度均设置为 min-height 的值。

因此，只需在父级上设置height:1px（因此设置一个特定的高度），子级的height:50%的值将计算为父母身高的50%。现在，不将父母身高计算为1px，而是计算为min-height的值。因此，孩子50％的身高将是父母最小身高的1/2。

高度百分比与最小高度的行为是什么？

2 个答案: