Mengapa `ketinggian: 100%` Tidak Berfungsi pada Elemen Kanak-kanak Tanpa Ketinggian Induk Apabila Menggunakan `min-height` atau `max-height`?

Mengapa ketinggian: 100% pada Kanak-kanak Tidak Digunakan Tanpa Nilai Ketinggian pada Ibu Bapa dengan Min-/Max-Ketinggian

Dalam senario tertentu, apabila kanak-kanak elemen ditetapkan kepada tinggi: 100% dan elemen induknya mempunyai Nilai tinggi min atau tinggi maks tetapi tiada nilai tinggi yang jelas, kanak-kanak mungkin tidak mewarisi ketinggian yang diingini. Mari kita selidiki sebab di sebalik tingkah laku ini dengan HTML, CSS dan spesifikasi CSS yang berkaitan.

Pertimbangkan kod 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%;
}

Masalah:

Dalam contoh di atas, apabila anda melihat dokumen ini dalam penyemak imbas, anda mungkin perasan bahawa elemen kanak-kanak tidak memenuhi keseluruhan bekas. Walaupun bekas mempunyai ketinggian min 300px dan kanak-kanak mempunyai ketinggian 100%, elemen kanak-kanak kekal kosong (tanpa sebarang ketinggian yang boleh dilihat).

Penjelasan:

Tingkah laku ini berpunca daripada spesifikasi CSS. Spesifikasi menyatakan bahawa:

"Menentukan peratusan ketinggian. Peratusan dikira berkenaan dengan ketinggian blok yang mengandungi kotak yang dijana. 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 kes kami, ketinggian bekas tidak dinyatakan dengan jelas. Ia ditentukan oleh kandungannya, yang dalam kes ini hanyalah elemen kanak-kanak. Memandangkan elemen kanak-kanak tidak mempunyai ketinggian eksplisit (disebabkan oleh peratusan ketinggian), ketinggian bekas pada dasarnya tidak ditentukan. Akibatnya, peratusan ketinggian kanak-kanak juga menjadi tidak ditentukan.

Untuk menyelesaikan isu ini dan memastikan elemen kanak-kanak memenuhi keseluruhan bekas, anda mesti menetapkan nilai ketinggian untuk bekas secara eksplisit, seperti yang dilihat dalam pengubahsuaian berikut CSS:

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

Dengan menetapkan ketinggian bekas kepada nilai yang kecil (dalam kes ini, 1px), anda memberikan ketinggian rujukan dengan berkesan untuk ketinggian peratusan unsur kanak-kanak. Ini membolehkan elemen anak mewarisi ketinggian bekas dengan betul, memastikan ia memenuhi keseluruhan bekas.

Atas ialah kandungan terperinci Mengapa `ketinggian: 100%` Tidak Berfungsi pada Elemen Kanak-kanak Tanpa Ketinggian Induk Apabila Menggunakan `min-height` atau `max-height`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!