為什麼我的 200% 高度網格專案沒有填充父容器？

網格元素高度計算

問題：

在CSS 網格佈局中，網格項目的高度設定為200%，但它不會擴展以適合父容器的高度。相反，它保留其子元素的高度。為什麼會發生這種情況？

答案：

網格元素的高度計算由它們在網格結構中的位置決定。網格項的父級不是容器，而是它所在的軌道。

在這種情況下，容器高度固定為 100px，但行高設定為 1fr，這是一個靈活的長度單位。因此，網格項目的百分比高度（200%）是相對於軌道高度的，允許項目垂直擴展軌道。

解決方案：

為了確保網格項擴展以填充容器的高度，行高也必須固定。透過將行高設定為與容器高度相同的值（例如 grid-template-rows: 100px），網格項目的百分比高度將根據容器的高度正確計算。

.gridContainer {
  grid-template-rows: 100px; /* Adjustment; previously set to 1fr */
}

透過此調整，網格項目現在將佔據容器的整個高度，任何溢出的內容都將被捲軸隱藏。

以上是為什麼我的 200% 高度網格專案沒有填充父容器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！