Kaj sploh je “overflow”? “Overflow” je atribut CSS-ja, ki določa kaj se zgodi, če vsebina presega meje svojega elementa. “Overflow” pozna pet načinov implementacije, ki so predstavljeni spodaj.

Primer uporabe “overflow” atributa

“Overflow: outo”
Obnaša se podobno, kot v Iframu, ampak je mnogo bolj uporaben in prijazen do SEO. Avtomatsko doda “scrollbar” desno ali spodaj odvisno od potreb vsebine.

Koda:

<div style="width:450px; height:100px; overflow:auto;">
<h1>Lorem ipsum</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

 
“Overflow: scroll”
Prisili “scrollbar”, da je vedno viden ne glede na vsebino v elementu.

Koda:

<div style="width:450px; height:100px; overflow:scroll;">
<h1>Lorem ipsum</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

 
“Overflow: hidden”
Skrijemo “scrollbar” ne glede na dolžino besedila v elementu. Besedilo je tako lahko odrezano.

Koda:

<div style="width:450px; height:100px; overflow:hidden;">
<h1>Lorem ipsum</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

 
“Overflow: visible”
Skrijemo “scrollbar” ne glede na dolžino besedila v elementu. Besedilo je tako lahko odrezano.

Koda:

<div style="width:450px; height:100px; overflow:visible;">
<h1>Lorem ipsum</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

 
“Overflow: inherit”
Podedujejo se nastavitve starša.

Koda:

<div style="width:450px; height:100px; padding-top: 100px; overflow:inherit;">
<h1>Lorem ipsum</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

 
“Overflow” je uporaben tudi pri težavah, kjer se glavni element (parent) ne more “objeti” svojega notranjega elementa (child). To so ponavadi elementi, kjer se uporablja atribut “float”. Ta problem pa lahko rešimo z “overflow: hidden”.