为什么我的 200% 高度网格项目没有填充父容器？

网格元素高度计算

问题：

在 CSS 网格布局中，网格项目的高度设置为 200%，但它不会扩展以适合父容器的高度 高度。相反，它保留其子元素的高度。为什么会发生这种情况？

答案：

网格元素的高度计算由它们在网格结构中的位置决定。网格项的父级不是容器，而是它所在的轨道。

在这种情况下，容器高度固定为 100px，但行高设置为 1fr，这是一个灵活的长度单位。因此，网格项目的百分比高度（200%）是相对于轨道高度的，允许项目垂直扩展轨道。

解决方案：

为了确保网格项扩展以填充容器的高度，行高也必须固定。通过将行高设置为与容器高度相同的值（例如 grid-template-rows: 100px），网格项目的百分比高度将根据容器的高度正确计算。

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

通过此调整，网格项现在将占据容器的整个高度，任何溢出的内容都将被滚动条隐藏。

以上是为什么我的 200% 高度网格项目没有填充父容器？的详细内容。更多信息请关注PHP中文网其他相关文章！