Mengapa Peratusan Ketinggian Item Grid CSS Saya Tidak Berfungsi Seperti Yang Dijangkakan?

Isu Pengiraan Ketinggian dalam Elemen Grid CSS

Dalam CSS, sifat ketinggian elemen grid kadangkala boleh berkelakuan di luar jangkaan. Ini boleh disebabkan oleh ketinggian berasaskan peratusan yang dikira secara relatif kepada elemen induk yang tidak dijangka.

Kajian Kes

Pertimbangkan elemen grid CSS dengan dimensi berikut:

• Bekas grid: ketinggian: 100px;
• Item grid: ketinggian: 200%;

Dijangkakan, item grid hendaklah dua kali ganda ketinggian bekas, dengan sebarang lebihan disembunyikan oleh bar skrol. Walau bagaimanapun, keputusan sebenar menunjukkan item grid melimpah tanpa bar skrol.

Memahami Puncanya

Setelah diperiksa dengan lebih teliti, ia menjadi jelas bahawa peratusan ketinggian sedang dikira berdasarkan pada elemen anak item grid, bukan bekas induk item grid. Ini kerana item grid wujud dua peringkat ke bawah dari bekas, dengan tahap perantaraan ialah trek.

Penyelesaian

Untuk menyelesaikan isu ini, ketinggian kedua-dua bekas dan baris dalam bekas hendaklah ditetapkan kepada nilai tetap. Dalam kes ini, kedua-dua bekas dan baris ditetapkan kepada 100px:

.gridContainer {
  height: 100px;
}

.gridContainer {
  grid-template-rows: 100px;
}

Dengan menentukan ketinggian kedua-dua bekas dan baris, ketinggian peratusan item grid boleh dikira dengan betul berbanding dengan induk yang dimaksudkan . Ini membolehkan item grid mempunyai ketinggian 200% daripada ketinggian baris, memastikan ia muat dalam bekas dengan sebarang limpahan tersembunyi oleh bar skrol.

Atas ialah kandungan terperinci Mengapa Peratusan Ketinggian Item Grid CSS Saya Tidak Berfungsi Seperti Yang Dijangkakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!