为什么我的网格项的百分比高度没有按预期工作？

为什么网格元素高度在计算为父高度的百分比时失败

CSS 网格的高度计算可能会令人困惑，尤其是在使用百分比时。在提供的示例中，网格项的高度设置为 200%，但它不会使容器的高度加倍。

理解网格层次结构

网格项目驻留在轨道内，该轨道包含在容器内。因此，网格项的父级是轨道，而不是直接容器。

百分比高度和网格结构

当网格行的高度没有定义为固定长度单位（例如，px）或计算为可用空间的一部分（例如，1fr），网格项的百分比高度失败。在这种情况下，网格项的高度默认为 auto，有效地允许其根据需要扩展行。

设置容器和行高

以确保网格元素的height 基于容器的高度，在容器和行上设置固定的高度。在提供的代码中，容器高度为 100px，但行高设置为 1fr。通过将行高更改为 100px，网格项的 200% 高度将正确地使容器的高度加倍。

更新的示例：

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

.gridItem {
  // ...
  overflow: auto;
}

通过调整行高度与容器高度相匹配，网格项的高度现在将按预期运行，将容器的高度加倍并正确地将内容包裹在其中它。

以上是为什么我的网格项的百分比高度没有按预期工作？的详细内容。更多信息请关注PHP中文网其他相关文章！