Properti tinggi CSS
Contoh
Atur tinggi dua elemen <div>:
div.a {
height: auto;
border:
1px solid black;
}
div.b {
height: 50px;
border: 1px solid black;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti height
mengatur ketinggian elemen.
Ketinggian elemen tidak termasuk padding, border, atau margin!
Jika height: auto;
elemen akan secara otomatis menyesuaikan ketinggiannya untuk memungkinkan kontennya ditampilkan dengan benar.
Jika height
diatur ke nilai numerik (seperti piksel, (r)em, persentase) maka jika konten tidak sesuai dengan ketinggian yang ditentukan, konten akan meluap. Bagaimana wadah akan menangani konten yang meluap ditentukan oleh
properti overflow .
Catatan: Properti min-height dan
max-height menimpa
height
properti.
Nilai bawaan: | mobil |
---|---|
Diwarisi: | tidak |
Animasi: | Ya. Baca tentang animasi |
Versi: kapan: | CSS1 |
Sintaks JavaScript: | objek .style.height="500px" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Property | |||||
---|---|---|---|---|---|
height | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
Sintaks CSS
height: auto|length|initial|inherit;
Nilai properti
Value | Description | Play it |
---|---|---|
auto | The browser calculates the height. This is default | |
length | Defines the height in px, cm, etc. Read about length units | |
% | Defines the height in percent of the containing block | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Lebih Banyak Contoh
Contoh
Atur tinggi elemen menjadi 50% dari tinggi elemen induk:
#parent {
height: 100px;
}
#child {
height: 50%;
}
Halaman Terkait
Tutorial CSS: Tinggi dan Lebar CSS
Tutorial CSS: Model Kotak CSS
Referensi CSS: properti lebar
Referensi DOM HTML: properti ketinggian