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

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>
<p>Dalam kes ini, 'innerDiv' akan mempunyai ketinggian 500px kerana ia diwarisi daripada induknya.</p>
<pre class="brush:php;toolbar:false"><div><p>Di sini, 'innerDiv' akan mempunyai ketinggian 10px kerana elemen anaknya 'evenInner' memerlukan ruang itu.</p></div>