Mengapakah `ketinggian: 100%` Gagal pada Elemen Kanak-kanak Apabila Induknya Mempunyai `min-height`/`max-height` tetapi Tiada Ketinggian Eksplisit?

Mengapa Ketinggian: 100% pada Elemen Kanak-kanak Gagal Digunakan Apabila Elemen Induk Mempunyai Nilai Ketinggian Min/Ketinggian Maks tetapi Tiada Nilai Ketinggian Tertentu?

Pertimbangkan HTML dan CSS berikut persediaan:

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

Dalam senario ini, elemen kontena dipaparkan dengan ketinggian 300px seperti yang dijangkakan, tetapi elemen anak kekal tanpa sebarang ketinggian walaupun ketinggian: 100% pengisytiharan.

Walau bagaimanapun, menambah nilai ketinggian kecil (cth., 1px) pada elemen bekas menyebabkan elemen anak tiba-tiba mengisi keseluruhan bekas dengan ketinggian 300px:

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

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

Tingkah laku ini berpunca daripada spesifikasi CSS itu sendiri. Apabila ketinggian elemen tidak ditakrifkan dengan jelas, peratusan ketinggian pada anaknya akan gagal. Mengikut spesifikasi:

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 kes awal, sejak ketinggian elemen bekas tidak ditetapkan secara eksplisit, ketinggian elemen kanak-kanak: 100% menjadi 'auto'. Ini bermakna ia akan mengambil hanya sebanyak ruang yang diperlukan oleh kandungannya, menyebabkan ketinggian tidak kelihatan.

Menambah nilai ketinggian (walaupun sekecil 1px) pada elemen bekas dengan jelas mentakrifkan ketinggiannya, membenarkan kanak-kanak ketinggian elemen: 100% untuk mengira dan menggunakan ketinggian yang betul.

Oleh itu, tingkah laku yang kelihatan tidak dijangka berpunca daripada fakta bahawa ketinggian unsur induk perlu ditakrifkan secara eksplisit untuk elemen anaknya mengira dengan betul peratusan ketinggiannya.

Atas ialah kandungan terperinci Mengapakah `ketinggian: 100%` Gagal pada Elemen Kanak-kanak Apabila Induknya Mempunyai `min-height`/`max-height` tetapi Tiada Ketinggian Eksplisit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!