Overflow

Dua Jendela November 14, 2021

7. Property CSS

a) Box Model

merupakan sebuah konsep dimana setiap elemen halaman website kita anggap seabgai sebuah kotak (box). Box inilah yang akan kemudian membangun struktur

desain dan layout dari website. Pembahasan yang akan kita pelajari meliputi :

1. Height dan Width

2. Margin dan Padding

3. Border dan Outline

4. Position

5. Overflow

6. Float dan Clear

7. Display dan Visibility

-----------------lanjutan

5.Overflow

Property overflow = mengatur sifat box ketika isinya melampaui ukuran box.

Jika diisi hidden, maka konten yang melampaui akan disembunyikan dengan syarat lebar atau tinggi box ditentukan oleh width dan height.

Jika lebar atau tinggi tidak ditentukan, maka lebar dan tinggi akan mengikuti lebar dan tinggi konten.

Jika diisi scroll, maka akan muncul scrollbar pada box, baik isinya melampaui box atau tidak.

Jika diisi auto, maka akan muncul scrollbar hanya jika isinya melampaui saja. Nilai default-nya visible, yaitu isi yang melampaui akan tetap ditampilkan.

Property Overflow memiliki turunan berupa overflow-x untuk mengatur horizontal, dan overflow-y untuk mengatur secara vertikal.

Perhatikan contoh script dibawah ini dengan nama file overflow.html

<html>
<head>
<title>Latihan CSS Overflow</title>
<style type="text/css">
   .box1{
        width: 150px;
        height: 150px;
        overflow: scroll;
        background: green;
        float: left;
   }
   .box2{
        width: 150px;
        height: 150px;
        overflow: hidden;
        background: blue;
   }
</style>
</head>
<body>
<div class="box1">Overflow:scroll.....</div>
<div class="box2">Overflow:hidden.....</div>
</body>
</html>