當父元素有「min-height」/「max-height」但沒有明確高度時，為什麼「height: 100%」在子元素上失敗？

為什麼當父元素有最小高度/最大高度值但沒有指定高度值時，子元素上的 Height: 100% 無法應用？

考慮以下HTML 和CSS setup:

<div class="container">
  <div class="child"></div>
</div>

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
}

.child {
  background-color: blue;
  width: 500px;
  height: 100%;
}

在這種情況下，容器元素按照預期以300px 的高度渲染，但儘管聲明了height: 100%，但子元素仍然沒有任何高度。

但是，為容器元素增加一個小的高度值（例如1px）會導致子元素突然充滿整個容器，高度為300px:

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
  height: 1px;
}

.child {
  background-color: blue;
  width: 500px;
  height: 100%;
}

此行為源自於CSS 規範本身。當未明確定義元素的高度時，其子元素的百分比高度將會失敗。依規範：

指定百分比高度。百分比是根據生成的盒子的包含塊的高度計算的。如果未明確指定包含區塊的高度（即，它取決於內容高度），且該元素不是絕對定位的，則該值計算為「auto」。

在初始情況下，由於容器元素的高度未明確設置，子元素的 height: 100% 變為「auto」。這意味著它只會佔用其內容所需的空間，從而導致不可見的高度。

為容器元素添加高度值（甚至小至 1px）明確定義其高度，從而允許子元素element's height: 100% 來計算並應用正確的高度。

因此，看似意外的行為源於這樣一個事實：父元素的高度需要為其子元素明確定義正確計算他們的身高百分比。

以上是當父元素有「min-height」/「max-height」但沒有明確高度時，為什麼「height: 100%」在子元素上失敗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！