首頁 > web前端 > css教學 > 主體

為什麼Grid-template-columns中顯示100%的網格超出了正文?

Mary-Kate Olsen
發布: 2024-11-01 04:39:27
原創
652 人瀏覽過

Why Does Display Grid with 100% in Grid-template-columns Exceed the Body?

為什麼 Grid-template-columns 中顯示 100% 的網格會超出正文?

在提供的 CSS 程式碼中:

<code class="css">.parent {
  position: fixed;
  width: 100%;
  left: 0;
  top: 14px;
  display: grid;
  grid-template-columns: 40% 60%;
  grid-gap: 5px;
  background: #eee;
}</code>
登入後複製

該問題不是由 width: 100% 屬性引起的,而是由 grid-template-columns 設定引起的。當指定百分比(40% 和 60%)和網格間隙(5px)時,總寬度超過 100%。這會導致固定定位時父容器超出主體的右邊緣。

解:使用 fr 單位

要解決此問題,建議使用小數單位 (fr) 而不是grid-template-columns 聲明的百分比。考慮到任何定義的間隙,小數單位按比例分配空間:

<code class="css">.parent {
  ...
  grid-template-columns: 4fr 6fr;
  ...
}</code>
登入後複製

範例:

<code class="html"><div class='parent'>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div></code>
登入後複製

透過此修改,父容器現在將在主體邊界內完全可見,即使在定位固定。

以上是為什麼Grid-template-columns中顯示100%的網格超出了正文?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板