當父元素只有「min-height」時，為什麼我的子元素不繼承高度？

子元素高度未與父元素最小高度/最大高度一起應用且沒有顯式高度

問題：

問題：

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

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

考慮以下CSS：

儘管子元素的高度設定為100%，當父元素有 min-height 值但沒有明確的高度時，子元素不佔用任何高度。只有當父元素的高度設定為偶數 1px 時，子元素才能正確填滿容器。

說明：

第一種情況（沒有明確的高度父級），子級的百分比高度失敗，因為：

根據CSS規格：

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

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

.child {
  background-color: blue;
  width: 500px;
  height: 400px;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  from {
    height: 100px;
  }
}

Min-height 僅提供最小邊界，元素的高度仍取決於其內容。

為了說明，請考慮以下修改例如：這裡，容器明確設定了一個小的填充，這強制子元素的最大高度小於 300px。動畫動態改變孩子的高度，顯示孩子的高度確實取決於可用空間，而不僅僅是其 100% 高度設定。

以上是當父元素只有「min-height」時，為什麼我的子元素不繼承高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！