Mengapa Div Anak Saya Tidak Mengisi 100% Ketinggian Apabila Ibu Bapa Hanya Mempunyai `min-height`?

Pengiraan Ketinggian dan Peratusan dalam Elemen Ibu Bapa-Anak

Pertimbangkan persediaan HTML dan CSS berikut:

<div class="container">
  <div class="child">
  </div>
</div>

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
}

.child {
  background-color: blue;
  width: 500px;
  height: 100%;
}

Ketinggian Kanak-kanak Tidak Membalas

Apabila elemen bekas mempunyai nilai ketinggian min, ketinggian elemen kanak-kanak kekal 0 walaupun spesifikasi 100%. Walau bagaimanapun, menetapkan ketinggian elemen bekas walaupun kepada nilai kecil seperti 1px membolehkan elemen kanak-kanak mengisi bekas.

Memahami Tingkah Laku

Sebab untuk ini tingkah laku terletak pada sifat pengiraan ketinggian dalam CSS. Apabila elemen induk tidak mempunyai ketinggian yang ditakrifkan secara eksplisit (seperti dalam kes ketinggian min), ketinggiannya ditentukan oleh kandungannya. Dalam kes ini, kandungannya ialah elemen kanak-kanak.

Walau bagaimanapun, ketinggian elemen kanak-kanak, ditetapkan kepada 100%, dikira relatif kepada ketinggian blok kandungannya. Memandangkan bongkah yang mengandungi (elemen induk) tidak mempunyai ketinggian yang dinyatakan secara eksplisit, ketinggian elemen kanak-kanak tidak boleh dikira.

Menentukan Ketinggian Secara Eksplisit

Menetapkan ketinggian elemen induk, walaupun kepada nilai yang kecil, memberikan ketinggian muktamad untuk blok yang mengandungi. Ini membolehkan elemen anak mengira ketinggiannya sebagai 100% ketinggian ibu bapa.

Key Takeaway:

Pengiraan peratusan ketinggian memerlukan ketinggian yang ditakrifkan dengan jelas untuk blok yang mengandungi . Dalam kes di mana blok yang mengandungi mempunyai nilai ketinggian min/tinggi maks tetapi tiada nilai ketinggian, ketinggian elemen kanak-kanak tidak akan digunakan sehingga ketinggian blok yang mengandungi ditakrifkan secara eksplisit.

Atas ialah kandungan terperinci Mengapa Div Anak Saya Tidak Mengisi 100% Ketinggian Apabila Ibu Bapa Hanya Mempunyai `min-height`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!