Mengapakah grid dengan 100% grid-template-lajur melangkaui badan apabila menggunakan kedudukan tetap?-tutorial css-php.cn

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

Mary-Kate Olsen

Lepaskan： 2024-11-02 09:07:02

asal

741 orang telah melayarinya

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!

Artikel sebelumnya：Bagaimana untuk Benar-benar Melumpuhkan Tatal Mendatar pada Halaman Web? Artikel seterusnya：Adakah jQuery Benar-benar Menyokong Semua Pemilih CSS3? Misteri :nth-last-child() dan Beyond.

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

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2726

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2847

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

2398

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...