Mengapa Elemen Anak Saya Tidak Mewarisi Ketinggian Apabila Ibu Bapa Hanya Mempunyai `min-height`?

Ketinggian Elemen Kanak-kanak Tidak Digunakan dengan Ketinggian min Induk/ketinggian maksimum dan Tiada Ketinggian Eksplisit

Masalah:

Pertimbangkan CSS berikut:

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

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

Walaupun elemen kanak-kanak mempunyai ketinggian ditetapkan kepada 100%, ia tidak mengambil sebarang ketinggian apabila elemen induk mempunyai nilai ketinggian min tetapi tiada ketinggian yang jelas. Hanya apabila ketinggian elemen induk ditetapkan kepada 1px genap, elemen anak mengisi bekas dengan betul.

Penjelasan:

Dalam kes pertama (tiada ketinggian eksplisit untuk ibu bapa), peratusan ketinggian kanak-kanak gagal kerana:

Menurut CSS spesifikasi:

"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'."

Ketinggian min hanya memberikan sempadan minimum dan ketinggian elemen masih bergantung pada kandungannya.

Untuk menggambarkan, pertimbangkan contoh yang diubah suai berikut:

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

.child {
  background-color: blue;
  width: 500px;
  height: 400px;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  from {
    height: 100px;
  }
}

Di sini, bekas menetapkan pelapik kecil secara eksplisit, yang memaksa elemen kanak-kanak mempunyai ketinggian maksimum yang lebih kecil daripada 300px. Animasi mengubah ketinggian kanak-kanak secara dinamik, menunjukkan bahawa ketinggian kanak-kanak itu sememangnya bergantung pada ruang yang ada dan bukan semata-mata pada tetapan ketinggian 100%nya.

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