为什么我的网格项目的百分比高度无法正常工作？

为什么我的网格元素的高度计算不正确？

不正确的高度计算可能源于 CSS 网格中高度百分比的解释方式布局。

在您的代码中，网格容器的固定高度为 100px，而网格项目的高度为 200%。通常，您会期望网格项占据容器高度的两倍 (200px)。但是，这在您的情况下没有发生。

原因是在 CSS 网格布局中，网格元素存在于轨道内，而轨道又存在于容器内。网格项占据轨道内的行或列，而不是直接在容器内。

因此，网格项的高度百分比是相对于它占据的轨道的高度，而不是容器的高度。在您的代码中，该行具有默认的自动高度，它允许网格项根据需要拉伸。

要解决此问题，您必须为网格项占用的行设置特定的高度。这将确保网格项的百分比高度相对于该高度正确计算。在修改后的代码中，行高已设置为 100px 以匹配容器的高度，从而产生所需的行为：

.gridContainer {
  ...
  grid-template-rows: 100px;    /* Specifies a fixed height for the row */
}

以上是为什么我的网格项目的百分比高度无法正常工作？的详细内容。更多信息请关注PHP中文网其他相关文章！