Bagaimanakah Saya Boleh Membuat Div Terapung 100% daripada Ketinggian Induknya?

Mencapai 100% Ketinggian untuk Div ​​Terapung dalam Induk

Apabila cuba menetapkan div terapung kepada 100% ketinggian induknya, anda boleh menghadapi cabaran di mana div dalam membuat dengan ketinggian 0px. Tingkah laku ini dikaitkan dengan penjajaran menegak lalai untuk elemen HTML. Untuk menangani isu ini, anda mesti mengkonfigurasi sifat paparan div induk untuk mendayakan penjajaran menegak.

Penyelesaian:

Untuk memaksa div dalam sepadan dengan ketinggian induk , ubah suai CSS seperti berikut:

#outer {
  display: flex;
  /* Add necessary prefixes for cross-browser compatibility. */
}

Tambahan Pertimbangan:

• Awalan: Adalah penting untuk menambah awalan vendor CSS yang sesuai untuk keserasian merentas penyemak imbas.
• Internet Explorer: Disebabkan sokongan terhad untuk Flexbox, Internet Explorer 9 dan lebih awal mungkin tidak memaparkan reka letak dengan betul.
• Penjajaran: Secara lalai, sifat align-item untuk induk ditetapkan kepada "regangan", yang bermaksud elemen anak, termasuk div dalam, akan menjajar dan meregang secara menegak untuk mengisi ruang yang ada. Jika anda memerlukan penjajaran yang berbeza untuk div kanak-kanak, anda boleh menggunakan sifat align-self.

Contoh Langsung:

Klik pautan berikut untuk siaran langsung Demonstrasi JSFiddle: https://jsfiddle.net/bv71tms5/2/

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Div Terapung 100% daripada Ketinggian Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!