Rumah >hujung hadapan web >tutorial css >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 Olsenasal
- 2024-11-02 09:07:02666semak imbas
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!