Ketinggian CSS: `100%` lwn. `auto` – Apakah perbezaan sebenar?

Memahami Perbezaan antara ketinggian CSS: 100% dan ketinggian: auto

Dalam CSS, sifat ketinggian mentakrifkan dimensi menegak elemen . Walau bagaimanapun, nilai yang diberikan kepadanya boleh membawa kepada hasil yang berbeza:

tinggi: 100%

Nilai ini menetapkan ketinggian elemen kepada 100% daripada ketinggian bekas induknya. Dalam erti kata lain, elemen mengisi keseluruhan ruang menegak yang tersedia dalam induknya.

ketinggian: auto

auto menunjukkan bahawa ketinggian elemen harus dikira secara automatik berdasarkan pada saiz kandungannya. Nilai ini sering digunakan apabila kandungannya dinamik dan ketinggiannya mungkin berbeza-beza.

Contoh Penjelasan

Untuk menggambarkan perbezaan selanjutnya:

Contoh 1: ketinggian: 100%

<div>

Dalam ini contoh, div luar mempunyai ketinggian tetap 50px. Menetapkan ketinggian: 100% kepada div dalam menyebabkan ia mengisi keseluruhan 50px bekas induknya.

Contoh 2: ketinggian: auto

<div>

Dalam ini contoh, div luar sekali lagi mempunyai ketinggian 50px. Memandangkan div dalam mempunyai ketinggian: auto, ia melaraskan ketinggiannya untuk menampung kandungannya, yang dalam kes ini ialah div kedua dengan ketinggian 10px. Oleh itu, div dalam akan mempunyai ketinggian 10px.

Atas ialah kandungan terperinci Ketinggian CSS: `100%` lwn. `auto` – Apakah perbezaan sebenar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!