CSS / Rozmiary
Przepełnienie {OVERFLOW}
W jaki sposób dodać suwaki przewijania do dowolnego elementu? Co zrobić, aby zawartość elementu nigdy nie wychodziła poza jego obręb?
selektor { overflow: sposób }Jako "sposób" należy podać:
- visible - pokazanie całej zawartości bez względu na rozmiary (domyślnie)
- hidden - ukrycie nadmiaru (nie obsługuje Netscape 7 ani Opera 6)
- scroll - suwaki do przewijania (nie obsługuje Opera 6)
- auto - pokazanie suwaków jeśli to konieczne (nie obsługuje Opera 6)
Według CSS 2.1 polecenie można również zastosować do komórek tabeli.
Określa co zrobić, gdy zawartość elementu nie mieści się w rozmiarach podanych przez width oraz height. Możliwe jest ukrycie nadmiarowej zawartość, pokazanie wszystkiego poprzez powiększenie rozmarów elementu (bez względu na parametry width i height) albo utworzenie suwaków do przewijania przepełnionej treści.
W przeglądarce Mozilla Firefox podczas drukowania strony, w której treść została objęta blokiem z przypisanym stylem "overflow: hidden", może wystąpić błąd, polegający na wydrukowaniu tylko pierwszej strony, nawet jeśli wysokość takiego bloku nie została określona.
Rozwiązaniem problemu jest przypisanie w arkuszu stylów dla wydruku deklaracji "overflow: visible" wszystkim elementom, które w domyślnym arkuszu stylów posiadają inną wartość tej właściwości, np.:
#tresc { overflow: hidden }
@media print {
#tresc { overflow: visible }
}Przykład:
width: 5ex
Szerokość tego akapitu jest większa niż 5ex, ponieważ w takich rozmiarach nie mieści się jego zawartość.
overflow: visible; width: 5ex overflow: visible; width: 5ex; overflow: visible; width: 5ex
overflow: scroll; width: 10em; height: 4em; overflow: scroll; width: 10em; height: 4em; overflow: scroll; width: 10em; height: 4em
overflow: auto; width: 10em; height: 4em; overflow: auto; width: 10em; height: 4em; overflow: auto; width: 10em; height: 4em
overflow: auto; width: 20em; overflow: auto; width: 20em; overflow: auto; width: 20em