Jika pada tutorial sebelumnya yang kita bahas adalah mengatur lebar, maka kali ini akan dibahas cara mengatur tinggi elemen dengan css. Berikut ini properti-properti yang akan dibahas dalam tutorial ini.
- height properti untuk menentukan tinggi elemen
- min-height digunakan untuk menentukan tinggi minimum elemen
- max-height digunakan untuk menentukan tinggi maksimum elemen
Properti-properti diatas akan kita bahas secara detail agar mudah dimengerti, anda dapat menyiapkan teks editor untuk memulai praktek tutorial ini.
Cara Mengatur Tinggi Elemen Dengan CSS
Untuk dapat mengatur tinggi elemen kita dapat menggunakan properti-properti diatas, nah dalam tutorial ini yang akan kita bahas terlebih dahulu adalah properti height, berikut ini contoh properti height ditambahkan dengan border agar tiap sudut elemen dapat terlihat.
<style type="text/css">
.height {
border: 1px solid #000;
height: 300px;
}
</style>
<div class="height">Mengatur tinggi elemen dengan css</div>
Berikut ini tampilan dari kode diatas…
Dilihat hasil dari tinggi elemen 300 pixel akan tetap dan tidak akan berubah meskipun browser diperkecil, tetapi akan berbeda jika dengan menggunakan persentase, karena persentase akan menyesuaikan lebar halaman.
Mengatur Tinggi Minimum Dan Maksimum Elemen Dengan CSS
Sebuah tinggi elemen dapat dibentuk secara dinamis berdasarkan batasan tinggi minimum dan maksimum sebuah elemen, nah untuk dapat mengatur tinggi minimum dan maksimum sebuah elemen html yaitu dengan menggunakan properti min-width dan max-width.
<style type="text/css">
.height {
border: 1px solid #000;
min-height: 200px;
max-height: 900px;
}
</style>
<div class="height">Mengatur tinggi minimum dan maksimum elemen dengan css</div>
Dari kode diatas bisa dilihat bahwa tinggi minimal sebuah elemen telah ditetapkan sebesar 200px dan tinggi maksimum 900px, maka sebuah elemen tidak akan melewati kedua nilai tersebut apabila sebuah browser lebih kecil atau lebih besar pada perangkat tertentu.
Penggunaan min dan max juga biasanya digunakan untuk mengatur halaman responsive yang sudah mendukung berbagai jenis dan ukuran perangkat yang digunakan.