CSS3 - Overflow

Rukovanje overflow sadržajem

Može postojati situacija kada sadržaj elementa može biti veći od dimenzija samog okvira. Na primjer, zadana svojstva širine i visine nisu omogućavala dovoljno prostora za smještaj sadržaja elementa. CSS svojstvo overflow omogućava vam da odredite hoćete li izrezati sadržaj, prikazati trake za pomicanje ili prikazati sadržaj overflow elementa na nivou bloka (block-level). Ovo svojstvo može imati jednu od sljedećih vrijednosti: visible (default), hidden, scroll, i auto. CSS3 takođe definiše svojstva overflow-x i overflow-y koja omogućavaju neozavisnu kontrolu vertikalnog i horizontalnog isjecanja. 

div {
    width: 250px;
    height: 150px;
    overflow: scroll;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Primjer CSS overflow svojstva</title>
  <style>
      div {
          width: 250px;
          height: 150px;
          border: 1px solid #cccccc;
      }
      div.scroll {            
          overflow: scroll;
      }
      div.hidden {
          overflow: hidden;
      }
  </style>
</head>
<body>
  <h1>Poigrajte se s veličinom div okvira da biste vidjeli kako funkcioniše</h1>
  <h2>overflow:scroll</h2>
  <div class="scroll">
      Overflow sadržaj možete pregledati pomoću klizača.
      Overflow sadržaj možete pregledati pomoću klizača.
      Overflow sadržaj možete pregledati pomoću klizača.
      Overflow sadržaj možete pregledati pomoću klizača.
      Overflow sadržaj možete pregledati pomoću klizača.
      Overflow sadržaj možete pregledati pomoću klizača.
      Overflow sadržaj možete pregledati pomoću klizača.
  </div>
  <h2>overflow:hidden</h2>
  <div class="hidden">
      Ovaj overflowed sadržaj je skriven.
      Ovaj overflowed sadržaj je skriven.
      Ovaj overflowed sadržaj je skriven.
      Ovaj overflowed sadržaj je skriven.
      Ovaj overflowed sadržaj je skriven.
      Ovaj overflowed sadržaj je skriven.
      Ovaj overflowed sadržaj je skriven.
  </div>
</body>
</html>
Vrijednost Opis
visible Zadana vrijednost. Sadržaj nije izrezan. Prikazaće se izvan okvira elementa i na taj način se može preklapati s drugim sadržajem.
hidden Sadržaj koji prelazi okvir elementa se isječe, a ostatak sadržaja biće skriven.
scroll Sadržaj koji se prelijeva izrezan je, baš kao i hidden, ali pruža mehanizam za pomicanje za pristup overflow sadržaju.
auto Ako je sadržaj overflow elementa će automatski pružiti klizače da bi se video ostatak sadržaja, inače se klizač neće pojaviti.