Rumah > hujung hadapan web > tutorial css > Mengapa Paparan Grid dengan 100% dalam Grid-template-lajur Melebihi Badan?

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

Mary-Kate Olsen
Lepaskan: 2024-11-01 04:39:27
asal
744 orang telah melayarinya

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

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>
Salin selepas log masuk

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>
Salin selepas log masuk

Contoh:

<code class="html"><div class='parent'>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div></code>
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan