Proprietatea CSS numita “Overflow” ii spune browserului cum sa afiseze continutul excedentar al unui element caruia i se poate atribui o inaltime(div, p etc.). Daca elementul container nu are o inaltime impusa, acesta isi va modifica inaltimea in functie de continut si astfel, in acest caz, proprietatea “Overflow” devine inutila. Pentru exemplificare vom atribui urmatoarea clasa CSS unui div in interiorul caruia vom plasa o imagine si un text:

.patrat {
width:100px;
height:100px;
border:1px solid black;
}

Overflow accepta 4 valori:

• visible(valoare default)
• hidden
• scroll
• auto

Visible

Daca nu ati setat alta valoarea, aceasta ii va fi atribuita implicit, fiind valoarea deafault a atributului “Overflow”. De retinut este faptul ca, desi va fi afisat tot continutul div-ului chiar daca depaseste dimensiunile definite, acesta nu va afecta layout-ul paginii.

Hidden

Continutul ce nu se incadreaza in limitele div-ului nu va fi afisat deloc. Aceasta valoare este folositoare pentru cazurile in care textul din interiorul divului nu are dimensiuni fixe si poate creea probleme de vizualizare. Continutul ce nu se va incadra in limite va fi accesibil doar prin intermediul vizualizarii codului sursa al paginii, asa ca poate fi considerat “pierdut” pentru utilizator.
Scroll

Daca este setata aceasta valoare, in interiorul div-ului vor aparea 2 bari de scroll pe orizontala si verticala, pentru vizualizarea continutului. De retinut este faptul ca ambele bari de scroll vor fi afisate, chiar daca in unele cazuri este necesara doar una dintre ele.

Auto

Valoare “auto” este similara cu “scroll”, diferenta o face faptul ca doar bara necesara este afisata.

Unde devine folositoare proprietatea “overflow”

1.In cazul in care avem de afisat mult continut intr-un spatiu relativ mic.

Atunci cand avem foarte mult continut dar putin spatiu la dispozitie, il putem plasa intr-un div cu dimensiuni prestabilite si caruia ii setam proprietatea “overflow” cu valoarea “scroll”. Astfel vor fi afisate barile de scroll care le vor permite utilizatorilor interesati sa citesca tot continutul chiar daca este intr-un spatiu restrans.

2.Cand vrem sa afisam doar partea din stanga sus a unei imagini.

Pot exista situatii in care vreti sa faceti vizibila doar partea din stanga sus a unei imagini. Poate vreti sa afisati imaginea drept un thumbnail, sau poate doriti sa afisati doar o mica parte din imagine ca sa atrageti vizitatorii sa dea click pe ea. Oricare ar fi motivul puteti plasa imaginea intru-un div cu dimensiuni predefinite si cu valoarea “hidden” a proprietatii “overflow”.

2.Atunci cand intr-o sectiune cu dimensiuni fixe este incarcat un continut dinamic.

Exista situatii in care o sectiune a unui site are dimensiuni fixe insa continutul este incarcat dinaminc si astlfel inposibil de stiut ce dimensiuni va avea. In aceasta situatie se poate folosi “overflow:auto” pentru a adauga barile de scroll in cazul in care continutul va depasi limitele div-ului in care este plasat.