当父 DIV 具有最小高度时，不能在子 DIV 中使用百分比高度？ [复制]答案

【问题标题】：Cannot use percent height in child DIV when the parent DIV has a min-height? [duplicate]当父 DIV 具有最小高度时，不能在子 DIV 中使用百分比高度？ [复制]
【发布时间】：2022-01-22 00:33:51
【问题描述】：

这是第一个例子。这工作正常。这里.b占据了.a高度的50%。

.a {
  background: orange;
  height: 200px;
  padding: 10px;
}

.b {
  background: lightblue;
  border: 5px solid blue;
  height: 50%;
}

<div class="a">
  <div class="b">
  </div>
</div>

这是第二个例子。除了使用min-height 设置.a 的高度而不是使用height 之外，几乎相同。

.a {
  background: orange;
  min-height: 200px;
  padding: 10px;
}

.b {
  background: lightblue;
  border: 5px solid blue;
  height: 50%;
}

<div class="a">
  <div class="b">
  </div>
</div>

但在第二个示例中，蓝色框几乎消失了。它不再是.a 高度的 50%。为什么会出现这个问题？将min-height 用于.a 时如何修复它？

【问题讨论】：

标签： css height

【解决方案1】：

难以置信，我实际上从未见过这种情况，我会看到的技巧是：

.a {
  position: relative;
  background: orange;
  min-height: 200px;
  padding: 10px;
}

.b {
  position: absolute;
  width: calc(100% - 10px);
  border: 5px solid blue;
  top: 0;
  left: 0;
  background: lightblue;
  height: 50%;
}

<div class="a">
  <div class="b">
  </div>
</div>

【讨论】：