Rumah > Artikel > hujung hadapan web > Mengapa Paparan Grid dengan 100% dalam Grid-template-lajur Melebihi Badan?
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.
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!