Perkenalan CSS Overflow
CSS Overflow secara umum dipakai untuk memilih apakah bab elemen yang keluar dari garis batas akan ditampilkan atau disembunyikan, atau sekedar diberi scroll bar untuk mengatasi ruang sempit tanpa membuang bagian-bagian elemen yang tersembunyi. Deklarasi overflow sanggup dituliskan menyerupai ini:
overflow:auto;Nilai auto pada properti overflow sanggup diartikan bahwa bagian-bagian elemen yang melebihi batas akan diatasi dengan menambahkan scroll bar pada area yang sempit. Nilai overflow juga sanggup ditulis sebagai hidden yang artinya bahwa bagian-bagian elemen yang akan melebihi batas akan disembunyikan. Nilai visible pada properti overflow akan menunjukkan penampilan area menyerupai halnya tidak mendeklarasikan overflow sama sekali.
Properti overflow sanggup dibagi menjadi dua, yaitu overflow-x dan overflow-y. overflow-x dipakai untuk memilih nasib bab elemen yang keluar dari area hanya dari sudut pandang horizontal saja, sedangkan overflow-y dipakai untuk memilih nasib bab elemen yang keluar dari area hanya dari sudut pandang vertikal saja.
Untuk menunjukkan hasil tampilan penerapan CSS Overflow yang jelas, setidaknya kau harus menambahkan deklarasi ukuran tinggi dan lebar area dengan nilai yang lebih kecil dari ukuran lebar dan tinggi konten yang ada di dalamnya. Cara penerapannya sanggup dituliskan secara top down ataupun inline menyerupai ini:
| Top-Down | Inline |
|---|---|
<style type='text/css'> | <div style='width:270px;height:200px;overflow:auto;'> |
Penerapan-Penerapan yang Lebih Beragam
overflow:auto;
overflow-x:auto;overflow-y:hidden;
overflow-x:hidden;overflow-y:auto;
overflow:hidden;
overflow:visible;
Tambahan
Selain auto, properti overflow juga sanggup dituliskan dengan nilai scroll:
overflow:scroll;Namun kekurangan nilai ini yaitu ketidakbisaannya di dalam menghilangkan scroll bar secara otomatis dikala sudah tidak ada lagi elemen yang keluar dari area: