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.
- 1Pengertian CSS (Cascading Style Sheets)
- 2Cara Memasukan Kode CSS Ke HTML
- 3Pengertian Selector Css
- 4Cara Penulisan Kode CSS
- 5Cara Penulisan Komentar Pada CSS
- 6Jenis-jenis Satuan Ukuran Pada CSS
- 7Jenis-jenis Pewarnaan Pada CSS
- 8Penerapan Properti Background Pada CSS
- 9Mengatur Font Pada CSS
- 10Mengatur Teks Pada CSS
- 11Mengatur Gambar Pada CSS
- 12Mengatur Link Dengan CSS
- 13Mengatur Tabel Dengan CSS
- 14Cara Mengatur Garis Dengan CSS
- 15Cara Mengatur Margin Dengan Css
- 16Cara Mengatur Padding Di CSS
- 17Mengatur List Dengan CSS
- 18Cara Mengganti Bentuk Kursor Mouse Di CSS
- 19Mengatur Outline Dengan CSS
- 20Mengatur Lebar Elemen Dengan CSS
- 21Mengatur Tinggi Elemen Dengan CSS
- 22Mengatur Visibility Di CSS
- 23Mengatur Position Di CSS
- 24Layer Pada Html Dengan CSS
- 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.
