Mengapa DIV Anak Saya Tidak Mewarisi 100% Ketinggian Daripada Induk Terapungnya?

Menguatkuasakan 100% Ketinggian untuk DIV Kanak-kanak Dalam Induk Terapung

Dalam HTML dan CSS yang disediakan, ketinggian DIV dalam kekal pada 0px walaupun ada usaha keras untuk mengisytiharkannya sebagai 100% daripada ibu bapa ketinggian.

Penyelesaian:

Untuk menyelesaikan isu ini, DIV induk, "luar", memerlukan sifat "display: flex" untuk mendayakan fungsi flexbox:

#outer {
  display: flex;
}

Flexbox memperkenalkan sokongan untuk susun atur yang fleksibel, membolehkan DIV dalaman, "dalaman", berkembang secara menegak dan menduduki ketinggian penuh induknya.

Pertimbangan Tambahan:

1. Keserasian Pelayar: Flexbox disokong secara meluas oleh penyemak imbas moden tetapi mungkin menimbulkan kebimbangan keserasian dengan versi lama Internet Explorer (cth., IE9). Gunakan awalan untuk memastikan keserasian merentas pelbagai penyemak imbas.
2. Jajarkan Item lwn. Jajarkan Diri: "align-item" ialah sifat untuk ibu bapa yang menentukan penjajaran menegak anak-anaknya. Nilai lalainya ialah "regangan," meregangkan semua kanak-kanak secara menegak untuk mengisi ketinggian yang tersedia. Jika penjajaran berbeza dikehendaki untuk DIV kanak-kanak, gunakan sifat "align-self".
3. Contoh JS Fiddle: Lawati https://jsfiddle.net/bv71tms5/2/ untuk lihat contoh kerja penyelesaian yang dicadangkan.

Atas ialah kandungan terperinci Mengapa DIV Anak Saya Tidak Mewarisi 100% Ketinggian Daripada Induk Terapungnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!