百分比高度与最小高度的行为是什么？ [复制]答案

【问题标题】：what is the behavior of percentage height with min height? [duplicate]百分比高度与最小高度的行为是什么？ [复制]
【发布时间】：2019-09-30 13:14:31
【问题描述】：

当你给父母指定最小高度和给孩子百分比高度时，孩子不会得到任何高度。

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

.c {
  height: 50%;
  background-color: red;
}

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

但是如果你给父母明确的高度，即使它小于最小高度，孩子也会得到一个高度，但它是相对于最小高度而不是提供的高度（当高度

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

.c {
  height: 50%;
  background-color: red;
}

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

首先，我想了解这种行为
我怎样才能以百分比的形式将高度分配给仅在父母身上具有最小高度的孩子

【问题讨论】：

height 仅从父级查看高度以计算 % 值。 min-height 是另一条规则 :( 但它确实是反过来的）
@G-Cyr 我同意，但是为什么在第二种情况下百分比是基于最小高度而不是高度..这在我附加的第一个 sn-p 中没有发生
基本上你给了一个明确的高度，所以百分比会起作用，高度会尊重最小高度..确实有点棘手，会尝试找到相关的解释
你很幸运，它没有使它高出半个像素。因为 min-height 值大于 height 值，所以高度值被覆盖/更新以保持浏览器行为连贯并避免有趣的错误
我之前问过的确切问题 :) 见stackoverflow.com/questions/39309205/…

标签： html css height

【解决方案1】：

这是百分比高度的工作原理https://developer.mozilla.org/en-US/docs/Web/CSS/height我使用这个链接是因为它更容易找到，正如另一个答案中提到的那样，规范链接https://www.w3.org/TR/CSS22/syndata.html#value-def-percentage

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

您必须向下滚动才能找到此（规格部分）

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

这里是如何在不指定父级高度的情况下使用绝对高度来获得百分比高度的工作

.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>

注意 - 你父母的身高 = min-height 和 height 之间的较大值，这就是你的第二种情况有效的原因

老实说，添加 1px 的高度作为一种变通方法，以在不定义固定高度（因为 min-height 覆盖）的情况下获得适用于儿童的百分比是一种很好的变通方法。

【讨论】：

为什么在第二种情况下百分比是相对于最小高度而不是明确提供的高度
你父母的身高是 height 和 min-height 之间的较大值，所以由于 50vh > 1px，你得到了孩子的 50%。我将这部分添加到答案中，以防这些 cmets 丢失

【解决方案2】：

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

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

在第二种情况下，您设置了特定高度和最小高度。根据另一个关于min-height

的规范

只要 min-height 大于 max-height 或 height，元素的高度就会设置为 min-height 的值。

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

【讨论】：