Mengapa Peratusan Tinggi Tidak Berfungsi dalam CSS Seperti Peratusan Lebar?

Ketinggian Peratusan dalam CSS: Membuka Kunci Teka-teki

Salah satu teka-teki yang biasa ditemui apabila menggunakan CSS ialah percanggahan antara nilai peratusan untuk lebar dan ketinggian. Walaupun nilai peratusan untuk kerja lebar seperti yang dijangkakan, perkara yang sama tidak benar untuk ketinggian.

Bayangkan anda mempunyai dua elemen: #bekerja dan #tidak berfungsi, masing-masing dengan nilai peratusan yang ditentukan untuk lebar dan tinggi. Elemen #working berkelakuan seperti yang dijangkakan: lebarnya ialah 80% daripada ruang pandang. Walau bagaimanapun, ketinggian elemen #tidak berfungsi kekal pada 0, walaupun ditetapkan kepada 30%.

Sifat Elemen Blok

Untuk memahami teka-teki ini, kita perlu untuk menyelidiki sifat elemen blok dalam CSS. Secara lalai, unsur sekat, seperti

, tentukan ketinggiannya berdasarkan kandungannya. Ini bermakna ketinggian mereka mengembang untuk menampung saiz kandungan yang disertakan.

Hubungan Ibu Bapa-Anak

Apabila menetapkan ketinggian elemen blok menggunakan nilai peratusan , kami merujuk bekas induk elemen. Dalam elemen #not-working, induk ialah viewport, yang tidak mempunyai ketinggian tertentu yang ditentukan. Akibatnya, terdapat gelung maklum balas yang tidak berkesudahan antara ibu bapa dan anak, dan ketinggian tidak dapat ditentukan dengan tepat.

Mematahkan Gelung Maklum Balas

Untuk mengatasi isu ini dan membenarkan peratusan ketinggian berfungsi dengan betul, kita mesti memecahkan gelung maklum balas dengan menyediakan elemen induk dengan ketinggian tertentu. Ini menyediakan titik rujukan tetap untuk mengira peratusan ketinggian elemen anak.

Ringkasnya, nilai peratusan untuk ketinggian dalam CSS memerlukan elemen induk mempunyai ketinggian yang ditentukan untuk mengelakkan kekaburan dan membolehkan pengiraan yang tepat. Tanpa ketinggian induk tetap, ketinggian elemen anak kekal 0.

Atas ialah kandungan terperinci Mengapa Peratusan Tinggi Tidak Berfungsi dalam CSS Seperti Peratusan Lebar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!