为什么我的固定位置网格布局超出了主体宽度？

固定位置网格布局超出正文宽度

使用固定位置的 CSS Grid 时，可能会遇到网格元素延伸的问题超出页面正文，特别是将 grid-template-columns 属性设置为 100% 时。要理解为什么会发生这种情况，让我们分解问题并提供解决方案。

在您提供的 CSS 代码中：

.parent {
  position: fixed;
  width: 100%;
  display: grid;
  grid-template-columns: 40% 60%;
}

您已为父容器指定 100% 的固定宽度，这意味着它将占据可视区域的整个宽度。 grid-template-columns 属性将网格列的宽度分别设置为 40% 和 60%。

但是，关键问题在于定位。当您将position:fixed设置为父容器时，它会脱离正常的文档流并放置在其指定的坐标处（在本例中为页面的左上角）。浏览器会为固定元素保留空间，即使其内容超出了可见区域。

此行为与 width: 100% 属性无关。即使删除该行，问题仍然存在。罪魁祸首是 grid-template-columns 属性。

grid-template-columns 属性将可用空间分为两列，但您还指定了列之间 5px 的网格间隙，这增加了网格的总宽度。在您的情况下，40% 60% 5px = 105px。这额外的 5px 将右列的边缘推到可视区域之外，导致它出现在正文之外。

解决方案：

要解决此问题，您需要计算考虑网格间隙，网格列的正确百分比。您可以使用 fr 单位，而不是使用绝对百分比，它代表可用空间的一小部分。

.parent {
  position: fixed;
  width: 100%;
  display: grid;
  grid-template-columns: 4fr 6fr;
}

在此修订后的代码中，4fr 和 6fr 值代表可用空间的 4 和 6 部分， 分别。浏览器将根据这些比例计算列的实际宽度，确保它们适合父容器，包括 5px 的网格间隙。

通过使用 fr 单元，您可以创建响应式网格布局适应不同的屏幕尺寸并确保网格元素保留在页面主体内。

以上是为什么我的固定位置网格布局超出了主体宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！