Mengapa Peratusan Tinggi Tidak Berfungsi Seperti Peratusan Lebar dalam CSS?

Memahami Peratusan Ketinggian dalam CSS

Dalam CSS, nilai peratusan untuk lebar berfungsi seperti yang diharapkan, tetapi perkara yang sama tidak berlaku untuk ketinggian. Untuk memahami tingkah laku ini, kita perlu memeriksa pengiraan ketinggian lalai unsur blok.

Pengiraan Ketinggian Lalai:

Ketinggian elemen blok ditentukan oleh kandungannya . Jika elemen mengandungi teks, imej atau elemen blok lain, ketinggiannya akan meningkat untuk menampung kandungan.

Lebar Peratusan lwn. Ketinggian Peratusan:

Apabila anda menentukan lebar peratusan, lebar elemen dikira sebagai peratusan lebar induknya. Memandangkan elemen blok sememangnya selebar induknya, pengiraan ini menghasilkan nilai yang jelas dalam piksel.

Walau bagaimanapun, ketinggian elemen blok bergantung pada kandungannya. Menentukan ketinggian: 50% mewujudkan kesamaran kerana tidak jelas berapa 50% ketinggian ibu bapa sepatutnya apabila kandungan unsur itu sendiri berpotensi mengubah ketinggiannya.

Memecahkan Gelung Maklum Balas:

Untuk menyelesaikan kekaburan ini, anda perlu memecahkan gelung maklum balas antara ibu bapa dan anak. Ini boleh dilakukan dengan menyatakan secara eksplisit ketinggian elemen induk.

Contohnya:

#parent {
  height: 200px;
}
#child {
  height: 50%;  /* Now calculates 50% of #parent's height */
}

Dengan menyediakan ketinggian khusus untuk induk, ketinggian elemen anak kini boleh dikira sebagai ditentukan peratusan, dengan berkesan menjadikan peratusan ketinggian berfungsi.

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