Tutorial Belajar CSS Bagian 51 : Cara Menggunakan Property Overflow di CSS

0
170

Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial Belajar CSS Bagian 50 : Cara Menggunakan Property Margin di CSS. Pada tutorial ini kita akan belajar tentang cara menggunakan property overflow di CSS.

Properti CSS overflow menentukan cara menangani konten ketika konten tersebut keluar (meluap) dari kontainer tingkat bloknya.

Kita tahu bahwa setiap elemen pada halaman adalah kotak persegi panjang dan ukuran, posisi, dan perilaku kotak-kotak ini dikontrol melalui CSS.

Mari kita ambil contoh: Jika Anda tidak mengatur tinggi kotak, kotak akan bertambah besar sesuai dengan isinya.

Tetapi jika Anda mengatur tinggi atau lebar kotak tertentu dan isi di dalamnya tidak muat, apa yang akan terjadi.

Properti CSS overflow digunakan untuk mengatasi masalah ini. Ini menentukan apakah akan membuat klip konten, merender bilah gulir, atau hanya menampilkan konten.

Nilai Property CSS Overflow

NilaiDeskripsi
visibleIni menentukan bahwa overflow tidak terpotong. Ini ditampilkan di luar kotak elemen. Ini adalah nilai default.
hiddenIni menentukan bahwa luapan terpotong, dan konten lainnya tidak akan terlihat.
scrollIni menentukan bahwa luapan terpotong, dan bilah gulir digunakan untuk melihat konten lainnya.
autoIni menentukan bahwa jika overflow terpotong, bilah gulir diperlukan untuk melihat konten lainnya.
inheritIni mewarisi properti dari elemen induknya.
initialni digunakan untuk mengatur properti ke nilai awalnya.

Contoh CSS Overflow

Mari kita lihat properti overflow CSS sederhana.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
  div.scroll {  
      background-color: #00ffff;  
      width: 100px;  
      height: 100px;  
      overflow: scroll;  
  }  

  div.hidden {  
      background-color: #00FF00;  
      width: 100px;  
      height: 170px;  
      overflow: hidden;  
  }  
</style>  
</head>  
<body>  
  <p> Properti overflow menentukan apa yang harus dilakukan jika konten suatu elemen melebihi ukuran kotak elemen.</p>  
  <p>overflow:scroll</p>  
  <div class="scroll"> Anda dapat menggunakan properti overflow bila Anda ingin memiliki kontrol tata letak yang lebih baik.  
  Nilai defaultnya adalah visible.</div>  
  <p>overflow:hidden</p>  
  <div class="hidden"> Anda dapat menggunakan properti overflow bila Anda ingin memiliki kontrol tata letak yang lebih baik.
  Nilai defaultnya adalah visible.</div>  
</body>  
</html>  

Semoga tutorial property overflow ini membantu Anda untuk memahami cara menangani konten ketika konten tersebut keluar (meluap) dari kontainer tingkat bloknya di website Anda.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.