Mengapa Paparan Grid dengan 100% dalam Grid-template-lajur Melebihi Badan?

Mengapa Paparan Grid dengan 100% dalam Grid-template-columns Melebihi Kandungan?

Dalam kod CSS yang disediakan:

<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>

Isu timbul bukan daripada lebar: 100% harta tetapi daripada tetapan grid-template-lajur. Apabila menentukan peratusan (40% dan 60%) dan jurang grid (5px), jumlah lebar melebihi 100%. Ini menyebabkan bekas induk melepasi tepi kanan badan apabila diposisikan tetap.

Penyelesaian: Menggunakan Unit fr

Untuk menyelesaikan isu ini, disyorkan untuk menggunakan unit pecahan (fr) dan bukannya peratusan untuk pengisytiharan grid-template-lajur. Unit pecahan memperuntukkan ruang secara berkadar, dengan mengambil kira sebarang jurang yang ditentukan:

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

Contoh:

<code class="html"><div class='parent'>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div></code>

Dengan pengubahsuaian ini, bekas induk kini akan kelihatan sepenuhnya dalam sempadan badan, walaupun apabila berkedudukan tetap.

Atas ialah kandungan terperinci Mengapa Paparan Grid dengan 100% dalam Grid-template-lajur Melebihi Badan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!