為什麼我的固定位置網格佈局超出了主體寬度？

固定位置網格佈局超出正文寬度

使用固定位置的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中文網其他相關文章！