Mengapa Peratusan Ketinggian dalam CSS Kadangkala Mengakibatkan Kelakuan Tidak Dijangka?

CSS: Memahami Keanehan Peratusan Ketinggian

Dalam CSS, sifat ketinggian boleh menjadi teka-teki yang membingungkan apabila menggunakan nilai peratusan. Tidak seperti rakan sejawatannya, lebar, yang berskala dengan mudah kepada saiz elemen induk, nilai peratusan ketinggian sering mengakibatkan tingkah laku yang tidak dijangka.

Misteri Ketinggian yang Hilang

Pertimbangkan HTML dan CSS berikut:

<div>

#working {
  width: 80%;
  height: 140px;
  background: orange;
}
#not-working {
  width: 80%;
  height: 30%;
  background: green;
}

Sementara lebar #working mengira kepada 80% daripada port pandangan seperti yang dijangkakan, ketinggian #tidak berfungsi secara mengelirukan menjadi 0.

Memecahkan Ketergantungan

Inti isu ini terletak pada ketinggian lalai elemen blok seperti div. Secara lalai, ketinggian elemen blok mematuhi saiz kandungannya. Ini mewujudkan gelung maklum balas:

<div>

Di sini, #dalaman mengembang agar sesuai dengan perenggan di dalamnya, manakala #luar berkembang untuk menampung #dalaman.

Nilai ketinggian peratusan menambah lapisan lain pada ini perhubungan. Apabila menentukan peratusan ketinggian, contohnya 30%, ia merujuk kepada ketinggian elemen induk. Walau bagaimanapun, ketinggian elemen induk dipengaruhi oleh ketinggian elemen anaknya, yang membawa kepada pergantungan bulat.

Penyelesaian

Untuk menyelesaikan dilema ini, gelung maklum balas mesti dipecahkan. Ini boleh dicapai dengan menetapkan ketinggian unsur induk secara eksplisit, dengan berkesan mengalih keluar pergantungannya pada elemen anaknya. Sebagai contoh, dalam contoh di atas, menambah #outer { height: 500px; } akan memberikan pengiraan yang jelas untuk kedua-dua #luar dan #tidak berfungsi.

Kesimpulannya, sementara nilai lebar peratusan berfungsi dengan lancar disebabkan sifat lebar bebas untuk elemen blok, pengiraan ketinggian peratusan secara semula jadi terikat kepada kandungan dan memerlukan definisi ketinggian yang jelas untuk elemen induk.

Atas ialah kandungan terperinci Mengapa Peratusan Ketinggian dalam CSS Kadangkala Mengakibatkan Kelakuan Tidak Dijangka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!