Rumah  >  Artikel  >  hujung hadapan web  >  Mengapakah grid dengan 100% grid-template-lajur melangkaui badan apabila menggunakan kedudukan tetap?

Mengapakah grid dengan 100% grid-template-lajur melangkaui badan apabila menggunakan kedudukan tetap?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-02 09:07:02581semak imbas

Why does a grid with 100% grid-template-columns extend beyond the body when using fixed positioning?

Grid Melebihi Kandungan dengan 100% Grid-Template-Columns

Mengapa grid paparan dengan 100% dalam grid-template-lajur memanjang di luar badan apabila kedudukan ditetapkan kepada tetap?

Masalah:

Pertimbangkan CSS dan HTML berikut:



< ;pre class="snippet-code-css lang-css prettyprint-override">.parent {
position:fixed;
width:100%;
left:0;
top:14px ;
paparan:grid;
grid-template-columns:40% 60%;
grid-gap:5px;
latar belakang:#eee;
}
.left {
sempadan:2px merah pepejal;
}
.kanan {
sempadan:2px merah pepejal;
}
<div class='parent'><br> <div class='left'>LEFT</div><br> <div class='right'> KANAN</div><br></div>

Apabila kedudukan tidak ditetapkan, grid dipaparkan dengan betul. Walau bagaimanapun, apabila kedudukan ditetapkan kepada tetap, grid melangkaui badan di sebelah kanan.

Penyelesaian:

Isunya bukan terletak pada lebar 100% tetapi dengan sifat grid-template-lajur. Menggunakan peratusan dan jurang grid tetap akan melebihi 100% daripada ruang yang ada.

Sebaliknya, bergantung pada unit fr untuk mengagihkan ruang kosong secara berkadar, dengan mengambil kira jurang grid:



.induk {<br> kedudukan:tetap;<br> lebar:100%;<br> kiri:0 ;<br> atas:14px;<br> paparan:grid;<br> grid-template-columns:4fr 6fr;<br> grid-gap:5px;<br> latar belakang:#eee;<br>}<br>.kiri {<br> sempadan:2px merah pepejal;<br>}<br>.kanan {<br> sempadan:2px merah pepejal;<br>}

<div class='parent'><br> <div class='left'>LEFT</div><br> <div class= 'kanan'>KANAN</div><br></div>

Dengan menggunakan unit fr, grid kini akan mengagihkan ruang dengan betul , memastikan ia kekal dalam lingkungan badan.

Atas ialah kandungan terperinci Mengapakah grid dengan 100% grid-template-lajur melangkaui badan apabila menggunakan kedudukan tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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