Mengapa Peratusan Ketinggian Tidak Berfungsi Seperti Yang Dijangkakan dalam CSS?

Mengapa Peratusan Ketinggian Tidak Berfungsi dalam CSS?

Memahami tingkah laku yang wujud unsur blok dalam CSS adalah penting apabila bekerja dengan peratusan- dimensi berasaskan. Walaupun lebar peratusan berfungsi seperti yang dijangkakan, peratusan ketinggian mempamerkan tingkah laku paradoks yang boleh membuatkan pembangun bingung.

Penentuan Ketinggian Lalai

Secara lalai, ketinggian elemen blok ialah ditentukan oleh kandungannya. Dalam erti kata lain, elemen akan mengembang secara menegak untuk menampung ketinggian yang diperlukan oleh kandungannya. Ini tidak seperti sifat lebar, yang secara semula jadi mengembangkan elemen secara mendatar untuk mengisi ruang yang tersedia dalam induknya.

Paradoks Peratusan

Apabila peratusan digunakan untuk menentukan ketinggian unsur, ia menandakan peratusan ketinggian unsur induk. Walau bagaimanapun, memandangkan ketinggian elemen induk selalunya bergantung pada ketinggian elemen anaknya, gelung maklum balas dibuat. Menetapkan ketinggian elemen kanak-kanak kepada peratusan tidak memberikan nilai konkrit untuk digunakan, kerana ia bergantung pada ketinggian ibu bapa, yang seterusnya bergantung pada ketinggian kanak-kanak. Kitaran ini menghalang pembentukan dimensi yang jelas.

Ketinggian Dipacu Kandungan

Berbeza dengan lebar, yang tidak bergantung pada kandungan, ketinggian dipengaruhi secara langsung oleh kandungan sesuatu unsur. Kebergantungan ini menjadikannya penting untuk menyediakan nilai ketinggian khusus untuk elemen induk, sekali gus memecahkan gelung maklum balas dan menyediakan titik rujukan konkrit untuk ketinggian peratusan elemen kanak-kanak.

Contoh untuk Digambarkan

Pertimbangkan kod berikut:

<div>

#inner {
  height: 50%;
}

Dalam contoh ini, ketinggian #dalaman akan bergantung pada ketinggian #luar. Namun, ketinggian #luar juga bergantung pada ketinggian #dalam. Tanpa menyatakan ketinggian untuk #luar, gelung maklum balas akan menghalang #dalaman daripada mempunyai ketinggian yang jelas.

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