Mengapa `ketinggian: 100%` Tidak Berfungsi pada Elemen Kanak-Kanak Apabila Ibu Bapa Hanya Mempunyai `min-tinggi`?

Mengapa Ketinggian Anak Gagal Walaupun 100% Apabila Ibu Bapa Hanya Mempunyai Ketinggian min/tinggi maks

Dalam coretan HTML yang diberikan, elemen bekas induk dengan ketinggian min : 300px dan tiada nilai ketinggian eksplisit menyebabkan ketinggian elemen kanak-kanak: 100% kepada gagal.

Memahami Tingkah Laku

Mengikut spesifikasi CSS:

"Menentukan peratusan ketinggian. Peratusan dikira berkenaan dengan ketinggian blok yang mengandungi kotak yang dihasilkan . Jika ketinggian blok yang mengandungi tidak dinyatakan secara eksplisit (iaitu, ia bergantung pada ketinggian kandungan), dan elemen ini tidak diletakkan secara mutlak, nilai dikira kepada 'auto.'"

Dalam senario yang disediakan, ketinggian elemen kontena tidak ditakrifkan secara eksplisit. Sebaliknya, ia ditentukan berdasarkan kandungannya dan nilai ketinggian min. Akibatnya, ketinggian elemen kanak-kanak: 100% tidak boleh dikira dengan tepat.

Memerlukan Ketinggian Eksplisit

Apabila nilai ketinggian ditetapkan pada bekas, walaupun sekecil 1px, ia secara eksplisit mentakrifkan ketinggian blok yang mengandungi. Ini membolehkan ketinggian elemen kanak-kanak: 100% untuk mengira dan digunakan dengan betul, mengisi keseluruhan bekas walaupun tanpa set ketinggian yang jelas.

Pendekatan Alternatif

Jika tingkah laku yang diingini adalah untuk elemen kanak-kanak itu diisi. keseluruhan elemen induk tanpa mengira ketinggian ibu bapa, satu pendekatan alternatif ialah menggunakan CSS flexbox seperti:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.child {
  height: 100%;
}

Atas ialah kandungan terperinci Mengapa `ketinggian: 100%` Tidak Berfungsi pada Elemen Kanak-Kanak Apabila Ibu Bapa Hanya Mempunyai `min-tinggi`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!