css - 最小高度：如果父母只设置了最小高度而不是高度，则 100% 不起作用

Question

我有一个带有固定的父容器min-height和一个带有min-height: 100%. 但是，子容器不会填满父容器的整个高度。

它看起来像这样（Chrome 90）：

.parent {
  background-color: lightgreen;
  min-height: 200px;
}

.child {
  background-color: yellow;
  min-height: 100%;
}

<div class='parent'>
  <div class='child'>
    child
  </div>
</div>

但我希望这样：

奇怪的是，在设置height而不是min-height在父级上时，它可以工作：

.parent {
  background-color: lightgreen;
  height: 200px;
}

.child {
  background-color: yellow;
  min-height: 100%;
}

<div class='parent'>
  <div class='child'>
    child
  </div>
</div>

有谁知道为什么？

标签： css

Answer 1

最简单的解决方法是添加height: 1px;到.parent. 它不影响min-height，所以你很高兴。

.parent {
  background-color: lightgreen;
  min-height: 200px;
  height: 1px;
}

.child {
  background-color: yellow;
  min-height: 100%;
}

<div class='parent'>
  <div class='child'>
    child
  </div>
</div>