Belajar CSS Part 19 - Penerapan Properti Overflow

CSS Layout - Overflow

Properti CSS overflow digunakan untuk mengontrol atau menghandle konten yang ukurannya melebihi ukuran parent dari konten tersebut.

Contoh penggunaan properti overflow:

This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Properti overflow memiliki nilai / value berikut:

visible
hidden
scroll
auto

Catatan: Properti overflow hanya bekerja untuk elemen block dengan ketinggian tertentu.

Catatan: Dalam OS X Lion (pada Mac), scrollbar tersembunyi secara default dan hanya ditunjukkan saat sedang digunakan (meskipun "overflow: scroll" diatur).

Overflow: visible;

Secara default overflow adalah visible, yang berarti bahwa konten yang ada di dalam elemen "tidak dipotong" dan "melebihi" ukuran elemen kotak yang ditentukan.

Contoh

div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: visible;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>CSS Overflow</h2>
<p>Secara default, overflow adalah visible, yang berarti bahwa konten yang ada di dalam elemen "tidak dipotong" dan "melebihi" ukuran elemen kotak yang ditentukan:</p>

<div>Kita dapat menggunakan properti overflow ketika kita ingin memiliki kontrol pada layout yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi (overflow) terhadap kotak elemen. </div>

</body>
</html>

Hasilnya:

Overflow: hidden;

Dengan value menggunakan hidden, yang berarti bahwa konten yang ada di dalam elemen menjadi "terpotong" dan "tidak melebihi" ukuran elemen kotak yang ditentukan.

Contoh

div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: hidden;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>CSS Overflow</h2>
<p>Dengan nilai hidden, overflow terpotong, dan sisa konten disembunyikan:</ p>

<p>Cobalah untuk menghapus properti overflow untuk memahami cara kerjanya.</p>

<div>Kita dapat menggunakan properti overflow ketika kita ingin memiliki kontrol pada layout yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi (overflow) terhadap kotak elemen. </ Div>

</body>
</html>

Hasilnya:

Overflow: scroll;

Menetapkan nilai scroll, yang berarti bahwa konten yang ada di dalam elemen menjadi "terpotong" dan ditambahkan scroll bar untuk menggulir konten yang ada di dalam kotak. Scroll bar yang ditambahkan adalah scrollbar secara horizontal dan vertikal (bahkan jika kita tidak membutuhkannya).

Contoh

div {
    background-color: #eee;
    width: 200px;
    height: 100px;
    border: 1px dotted black;
    overflow: scroll;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>CSS Overflow</h2>
<p>Value scroll, yang berarti bahwa konten yang ada di dalam elemen menjadi "terpotong" dan ditambahkan scroll bar untuk menggulir konten yang ada di dalam kotak.:</p>

<div>Kita dapat menggunakan properti overflow ketika kita ingin memiliki kontrol pada layout yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi (overflow) terhadap kotak elemen. </ Div>

</body>
</html>

Hasilnya:

Overflow: auto;

Value auto hampir sama dengan value scroll, perbedaannya pada value auto hanya menambahkan scrollbar jika diperlukan.

Contoh

div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: auto;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>CSS Overflow</h2>
<p>Value auto hampir sama dengan value scroll, perbedaannya pada value auto hanya menambahkan scrollbar jika diperlukan:</p>

<div>Kita dapat menggunakan properti overflow ketika kita ingin memiliki kontrol pada layout yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi (overflow) terhadap kotak elemen. </ Div>

</body>
</html>

Hasilnya:

overflow-x dan overflow-y

Properti overflow-x dan overflow-y digunakan dalam menentukan apakah untuk mengubah overflow konten hanya horizontal atau vertikal (atau kedua-duanya).

overflow-x menentukan apa yang harus dilakukan pada sisi kiri / kanan konten.
overflow-y menentukan apa yang harus dilakukan pada sisi bawah / atas konten.

Contoh

div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow-x: hidden;
    overflow-y: scroll;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>CSS Overflow</h2>
<p>Kita dapat mengubah overflow secara horizontal atau vertical.</p>
<p>overflow-x menentukan apa yang harus dilakukan pada sisi kiri / kanan konten.
<br>
overflow-y menentukan apa yang harus dilakukan pada sisi bawah / atas konten.</p>

<div>Kita dapat menggunakan properti overflow ketika kita ingin memiliki kontrol pada layout yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi (overflow) terhadap kotak elemen. </ Div>

</body>
</html>

Hasilnya:

Tabel Properti Overflow

Dibawah ini adalah tabel dari semua properti CSS Overflow:

Properti	Deskripsi
overflow	Menentukan yang terjadi jika konten melebihi kotak elemen
overflow-x	Menentukan apakah yang harus diterapkan pada sisi kiri / kanan konten
overflow-y	Menentukan apakah yang harus diterapkan pada sisi atas / bawah konten