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

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中文網其他相關文章！

來源：php.cn

上一篇：如何真正禁用網頁上的水平滾動？ 下一篇：jQuery 真的支援所有 CSS3 選擇器嗎？ :nth-last-child() 之謎及其他。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章

最新問題

function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...

來自於 2024-04-29 11:01:01

0

2

1732

google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？

來自於 2024-04-23 00:22:19

0

10

1887

子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應

來自於 2024-04-19 15:37:47

0

1

1600

父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...

來自於 2024-04-18 23:52:34

0

1

1511

關於CSS心智圖的課件在哪？ 課件

來自於 2024-04-16 10:10:18

0

0

1548

相關專題

更多>

• resample函數用法
• hdtunepro用法
• win10 taskmgr.exe檔應用程式錯誤解決方法
• iis無法啟動怎麼辦
• secondary logon服務怎麼開啟
• 手機副卡是什麼意思
• 1433端口
• premiere是什麼軟體