Apakah Perbezaan Antara CSS `height: auto` dan `height: 100%`?

Memahami Perbezaan Halus Antara 'height: auto' dan 'height: 100%' dalam CSS

Apabila menggayakan elemen dengan CSS, sifat 'height: auto' dan 'height: 100%' boleh digunakan untuk mengawal dimensi menegak elemen. Walau bagaimanapun, memahami tingkah laku mereka yang berbeza adalah penting untuk mencapai hasil yang diingini.

'ketinggian: 100%'

Apabila 'ketinggian: 100%' digunakan pada elemen, ia mewarisi ruang menegak bekas induknya. Dalam erti kata lain, ia meregang dan mengecut mengikut ketinggian ibu bapa.

Sebagai contoh, jika anda mempunyai <div> dengan ketinggian 500px dan gunakan 'ketinggian: 100%;' kepada elemen anaknya 'innerDiv', 'innerDiv' juga akan mempunyai ketinggian 500px.

'height: auto'

Sebaliknya, 'height: auto' menetapkan ketinggian elemen kepada saiz intrinsiknya. Ini bermakna ia akan menyesuaikan diri dengan kandungan yang terkandung di dalamnya, membenarkan elemen kanak-kanak mempengaruhi dimensinya.

Sebagai contoh, jika kita menambah satu lagi elemen kanak-kanak 'evenInner' kepada 'innerDiv' dengan ketinggian 10px, 'innerDiv' akan melaraskan ketinggiannya secara automatik kepada 10px, tanpa mengira bekas induknya ketinggian.

Contoh:

<div>

Dalam kes ini, 'innerDiv' akan mempunyai ketinggian 500px kerana ia diwarisi daripada induknya.

<div>

Di sini, 'innerDiv' akan mempunyai ketinggian 10px kerana elemen anaknya 'evenInner' memerlukan ruang itu.

Atas ialah kandungan terperinci Apakah Perbezaan Antara CSS `height: auto` dan `height: 100%`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!