為什麼使用固定定位時，100% 網格模板列的網格會超出主體？-css教學-PHP中文網

為什麼使用固定定位時，100% 網格模板列的網格會超出主體？

Mary-Kate Olsen

發布： 2024-11-02 09:07:02

原創

656 人瀏覽過

Why does a grid with 100% grid-template-columns extend beyond the body when using fixed positioning?

Grid-Template-Columns 為100% 時網格超出正文

為何grid-template-columns 為100% 的顯示網格會擴展當位置設定為時超出身體修復了嗎？

問題：

考慮以下CSS 與HTML：

parent {<br> 位置：固定；<br> 寬度：100%; <br> 左：0;<br> 頂部：14px;<br> 顯示：網格；<br> grid-template-columns :40% 60%;<br> grid-gap:5px;<br> 背景:#eee;<br>}<br>.left {<br> 邊框:2px 純紅;<br> }<br> }<br>. right {<br> 邊框：2px 實心紅色;<br>}

登入後複製

<div class='parent'><br> <div class='left'>LEFT</div><br> <div class='right'>RIGHT</div><br></div>

登入後複製

當位置不固定時，網格顯示正確。但是，當位置設定為固定時，網格會超出右側的主體。

解：

問題不在於 100% 寬度，而在於與 grid-template-columns 屬性。使用百分比和固定網格間隙將超過可用空間的 100%。

相反，依靠fr 單位按比例分配可用空間，同時考慮網格間隙：

. parent { <br> 位置：固定；<br> 寬度：100%；<br> 左：0;<br>頂部:14px;<br> 顯示:網格;<br> grid-template-columns:4fr 6fr ;<br> grid-gap:5px;<br> 背景:#eee;<br>}<br>.left { <br> 邊框：2px 實心紅色；<br>}<br>.right {<br>邊框：2px 實心紅色;<br>}

登入後複製

<div class='parent'><br> <div class= 'left'>LEFT</div><br> <div class='right'>RIGHT</div><br></div>

登入後複製

透過使用fr 單位，網格現在將分佈正確的空間，確保其保持在身體的範圍內。

以上是為什麼使用固定定位時，100% 網格模板列的網格會超出主體？的詳細內容。更多資訊請關注PHP中文網其他相關文章！