CSS overflow

CSS pravidlo overflow je velmi šikovné. Umožňuje nám „vyrobit“ blokové elementy menší, než by odpovídalo jejich obsahu, a rozhodnout se, jakým způsobem bude jejich obsah zpřístupněn.

základní nastavení (visible)

Element zůstává tak veliký, jak jsme mu v CSSku řekli, ale text, pokud se do něj nevleze, jednoduše „přeteče“ mimo něj. (Pokud na to nekoukáte IEčkem, které roztáhne příslušný element tak, aby se do něj všechno vešlo.)
Tady je nějaký text, jenom abychom viděli, co s tímhle elementem provedou různá nastavení overflow. Musí ho být trochu víc, jinak není moc na co koukat.


hidden

Co se nevleze do elementu, je odříznuto. 
  div.overflow {
    overflow: hidden;
  }
Tady je nějaký text, jenom abychom viděli, co s tímhle elementem provedou různá nastavení overflow. Musí ho být trochu víc, jinak není moc na co koukat.


scroll

Zapne implicitní posouvání všemi směry. A to úmyslně ať je potřeba nebo není, aby se předešlo problémům s „poskakováním“ obsahu při objevování a mizení posouvátek (scrollbarů). 
  div.overflow {
    overflow: scroll;
  }
Tady je nějaký text, jenom abychom viděli, co s tímhle elementem provedou různá nastavení overflow. Musí ho být trochu víc, jinak není moc na co koukat.


auto

Teoreticky nejužitečnější hodnota, protože např. ve Firefoxu zapne posouvání jenom tam, kde je to skutečně potřeba (mimo tak „extrémní případ, jako je TBODY u tabulky“, kde to ovšem zase žádný jiný browser nepodporuje vůbec). Prakticky je ovšem podle specifikace zcela závislá na konkrétní implementaci v příslušném programu, takže opatrně s ní... 
  div.overflow {
    overflow: auto;
  }
Tady je nějaký text, jenom abychom viděli, co s tímhle elementem provedou různá nastavení overflow. Musí ho být trochu víc, jinak není moc na co koukat.

Příklad téhož aplikováno na tabulku (nejde ani v IE, ani v Opeře): 
  tbody {
    height: 100px;
    overflow: auto;
  }
hlavička 1 hlavička 2+3
patička 1 patička 2+3
r1s1 r1s2 r1s3
r2s1 r2s2 r2s3
r3s1 r3s2 r3s3
r4s1 r4s2 r4s3
r5s1 r5s2 r5s3
r6s1 r6s2 r6s3
r7s1 r7s2 r7s3
r8s1 r8s2 r8s3
r9s1 r9s2 r9s3