为什么我的 CSS 网格项目高度没有成为父容器高度的两倍？

CSS 网格：元素高度计算混乱

您遇到了 CSS 网格元素高度的问题，特别是 .gridItem ，未按预期计算。在此网格设置中：

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

.gridItem {
  height: 200%;
}

目的是让 .gridItem 的高度为其父级 .gridContainer 的两倍。然而，结果似乎反而考虑了子元素的高度。

理解 CSS 网格中的父子关系

使用 CSS 网格时，理解 CSS 网格中的父子关系至关重要亲子关系。在这种情况下， .gridItem 的父元素不是直接的 .gridContainer ，而是包含它的网格轨道。

当指定 grid-template-rows: 1fr; 时，您可以使用灵活的占用父级可用空间的 1 小数单位的高度。由于父轨道的高度固定为 100px，因此轨道的高度变为 100px。

因此，即使 .gridItem 的 height: 200%，它指的是其父轨道的高度，即 100px。这解释了为什么 .gridItem 的高度实际上是轨道高度的两倍，而不是父容器的高度。

修复：在容器和轨道上设置显式高度

要解决此问题，您需要在 .gridContainer 和网格轨道上指定固定高度。这建立了清晰的父子关系，并允许 .gridItem 的百分比高度正常运行。

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

.gridItem {
  height: 200%;
}

通过此调整，.gridItem 的高度现在应该是 .gridContainer 高度的两倍，正如预期的那样.

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