Rumah > hujung hadapan web > tutorial css > Mengapa Elemen Kanak-kanak Melimpah dengan `max-height: 100%` Apabila Ibu Bapa Mempunyai `max-height`?

Mengapa Elemen Kanak-kanak Melimpah dengan `max-height: 100%` Apabila Ibu Bapa Mempunyai `max-height`?

Barbara Streisand
Lepaskan: 2024-12-30 01:49:09
asal
215 orang telah melayarinya

Why Does a Child Element Overflow with `max-height: 100%` When the Parent Has a `max-height`?

Isu Limpahan Tidak Dijangka dengan ketinggian maksimum: 100%

Dalam contoh yang diberikan, elemen kanak-kanak dengan ketinggian maksimum 100% melimpah bekas induk dengan ketinggian maksimum yang ditentukan. Tingkah laku yang nampaknya tidak dijangka ini menimbulkan persoalan tentang sifat ketinggian maksimum dalam senario sedemikian.

Inti isu ini terletak pada pengiraan ketinggian maksimum pada elemen kanak-kanak. Apabila ketinggian maks ditetapkan sebagai peratusan, ia ditafsirkan sebagai peratusan ketinggian sebenar ibu bapa, bukannya ketinggian maksimumnya. Sekiranya tiada ketinggian eksplisit yang dinyatakan untuk ibu bapa, ketinggian sebenar ibu bapa tidak ditentukan dan oleh itu ketinggian maksimum kanak-kanak menjadi ingkar kepada tiada.

Tanpa ketinggian maksimum yang dikuatkuasakan ke atas kanak-kanak, ia adalah percuma untuk berkembang ke tahap penuh kandungannya. Dalam kes imej, yang biasanya mempunyai nisbah bidang menegak lebih besar daripada nisbah bidang mendatar, imej melimpah ketinggian bekas ke bawah sambil mengekalkan nisbah aspek yang wujud.

Penyelesaian kepada tingkah laku yang tidak dijangka ini adalah dengan secara eksplisit tentukan ketinggian untuk elemen induk. Dengan berbuat demikian, titik rujukan ketinggian tetap ditetapkan untuk pengiraan ketinggian maksimum kanak-kanak. Ini memastikan kanak-kanak itu kekal dalam had ketinggian yang ditetapkan sambil mengekalkan nisbah aspeknya, mengelakkan sebarang limpahan.

Atas ialah kandungan terperinci Mengapa Elemen Kanak-kanak Melimpah dengan `max-height: 100%` Apabila Ibu Bapa Mempunyai `max-height`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan