Mengapa Div Kanak-kanak Terapung Kadang-kadang Mempunyai Ketinggian 0px, dan Bagaimana Saya Boleh Membetulkannya?

Mencapai 100% Ketinggian untuk Div ​​Anak Terapung

Apabila menggunakan div anak terapung dalam div ibu bapa, anda mungkin menghadapi situasi di mana kanak-kanak itu div menganggap ketinggian 0px. Tingkah laku yang kelihatan membingungkan ini berpunca daripada cara unsur terapung berinteraksi dengan ibu bapa mereka.

Dalam kes khusus ini, div dalam ditetapkan untuk terapung ke kiri dan ditetapkan ketinggian 100%. Walau bagaimanapun, konfigurasi ini gagal mencapai hasil yang diingini.

Kunci untuk menyelesaikan isu ini terletak pada mengubah suai sifat CSS div induk. Dengan menetapkan sifat paparan kepada lentur, anda boleh memaksa div induk berkelakuan seperti bekas fleksibel, membolehkan elemen anaknya meregang ke ketinggian penuhnya.

Berikut ialah kod CSS yang diubah suai untuk div induk:

#outer {
  display: flex;
}

Adalah penting untuk ambil perhatian bahawa penyemak imbas yang lebih lama, seperti IE9, mungkin tidak menyokong sepenuhnya sifat flex. Oleh itu, adalah dinasihatkan untuk menambah awalan vendor untuk memastikan keserasian merentas penyemak imbas yang berbeza. Selain itu, pertimbangkan untuk menggunakan sifat align-item dengan nilai regangan untuk memastikan div anak memenuhi keseluruhan ketinggian div induk.

Dengan menggunakan pengubahsuaian CSS ini, anda boleh berjaya memaksa div dalam untuk menganggap 100% ketinggian div induknya, mencapai penjajaran menegak yang diingini.

Atas ialah kandungan terperinci Mengapa Div Kanak-kanak Terapung Kadang-kadang Mempunyai Ketinggian 0px, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!