jesteś w: Główna > css > opisy styli > overflow
Ostatnia aktualizacja tej strony: 2006-11-07, 20:11:28

overflow

Styl określa jak powinna zachowywać się zawartość bloku po wyjściu za jego granice.

Wartość:

visible
zawartość jest widoczna
hidden
zawartość która wychodzi poza element otaczający jest obcinana (niewidoczna)
scroll
blok otaczający posiada paski przewijania, które aktywują się w razie potrzeby
auto
ta właściwość nie jest dokładnie zdefiniowana ale zaleca się żeby w razie porzeby przeglądarki pokazywały paski przewijania. Jeśli nie ma takiej potrzeby (treść nie wychodzi poza obszar bloku otaczającego) styl nie wpływa na blok otaczajacy i treść

Opis overflow na stronach W3C

Zasada działania

Może to być zaskoczeniem dla wielu webmajstrów (tych IE-only) ale zgodnie ze specyfikacją blok otaczający nie powinien się rozszerzać jeśli jego zawartość jest większa od niego.

Jak to powinno działać pokazuje poniższy kod i obrazek (blok otaczający - czerwona ramka):

<div style="width:100px; border:2px solid #f00; background:#ddd;">
  <p style="width:150px; background:#eee;border:2px solid #00f">
  to jest tylko przykładowy tekst prezentujący zasadę działania width w normalnych (nie IE) przeglądarkach
  </p>
  <p>
  a to jest bardzo długie słowo konstantynopolitańczykowianeczka
  </p>
</div>
Rysunek przedstawiający jak zachowuję się zawartość bloku z wymiarami ustawionymi na sztywno jeśli jest szersza od niego (to samo dotyczy wysokości)

Internet Explorer - prawie jak przeglądarka

overflow:auto; nie działa w ie jeśli nie ma nałożonych wymiarów, np.:

div.thin{
  overflow:auto;
  width: 20em;
}

Czyli ustalanie wymiarów za pomocą (przykładowo) marginesów i overflow:auto w IE nie zadziała.

Jeśli Internet Explorer pokazuje dodatkowo paski pionowe, można użyć stylu dostępnego tylko dla niego: overflow-x: auto;

Oczywiście istnieje także overflow-y dla Internet Explorera.

overflow-x i overflow-y są dostępne w gecko i będą oficjalnie w css3 - przynajmniej narazie tak donosi css module: The box model - working draft.

Menu

Działy:

Quick start:

Inne:

animacje Flash

Diablo 2: