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

CSS 网格元素中的高度计算问题

在 CSS 中，网格元素的高度属性有时会出现意外行为。这可能是由于相对于意外父元素计算的基于百分比的高度引起的。

案例研究

考虑具有以下尺寸的 CSS 网格元素：

• 网格容器：高度：100px；
• 网格项目：高度： 200%;

预期，网格项应该是容器高度的两倍，任何超出的部分都被滚动条隐藏。然而，实际结果显示网格项目溢出，没有滚动条。

理解原因

仔细检查后，很明显，百分比高度是根据在网格项的子元素上，而不是网格项的父容器上。这是因为网格项存在于容器下方两层，中间层是轨道。

分辨率

要解决此问题，两个网格的高度容器和容器内的行应设置为固定值。在这种情况下，容器和行都设置为 100px：

.gridContainer {
  height: 100px;
}

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

通过定义容器和行的高度，可以相对于预期父级正确计算网格项目的百分比高度。这允许网格项的高度为行高的 200%，确保它适合容器内，并且滚动条隐藏任何溢出。

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