為什麼我的 CSS 網格專案高度百分比沒有如預期運作？

CSS 網格元素中的高度計算問題

在 CSS 中，網格元素的高度屬性有時會出現意外行為。這可能是由於相對於意外父元素計算的基於百分比的高度引起的。

案例研究

考慮具有以下尺寸的CSS 網格元素：

• 網格容器：高度：100px；
• 網格項目：高度： 200%;

預期，網格項應該是容器高度的兩倍，任何超出的部分都被滾動條隱藏。然而，實際結果顯示網格項目溢出，沒有捲軸。

理解原因

仔細檢查後，很明顯，百分比高度是根據在網格項的子元素上，而不是網格項的父容器上。這是因為網格項存在於容器下方兩層，中間層是軌道。

解析度

要解決此問題，兩個網格的高度容器和容器內的行應設定為固定值。在這種情況下，容器和行都設定為 100px：

.gridContainer {
  height: 100px;
}

.gridContainer {
  grid-template-rows: 100px;
}

透過定義容器和行的高度，可以相對於預期父級正確計算網格項目的百分比高度。這允許網格項目的高度為行高的 200%，確保它適合容器內，並且滾動條隱藏任何溢出。

以上是為什麼我的 CSS 網格專案高度百分比沒有如預期運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！