Przepełnienie - overflow
Wstęp
Właściwośćoverflowdecyduje co zrobić z zawartością, która wychodzi poza wymiary aktualnego elementu. Dokładnie mówiąc są trzy właściwości:overflow,overflow-x,overflow-y. Właściwośćoverflowdotyczy zarówno wysokości, jak i szerokości,overflow-xszerokości, aoverflow-ywysokości.
Każda z tych właściwości może przyjąć wartości, które zostały omówione poniżej.
visible
Wartośćvisiblesprawia że zawartość, która wychodzi poza wymiary elementu jest widoczna. Jest to wartość domyślna, czyli używana w przypadku, gdy nie określisz innej.
| 1 2 3 4 5 6 7 8 910 | div{width:200px;height:100px;border:1pxsolidred;margin:10px;}p{width:400px;text-align:justify;} |
|---|---|
hidden
Wartośćhiddensprawia że zawartość, która wychodzi poza wymiary elementu jest niewidoczna.
| 1 2 3 4 5 6 7 8 91011 | div{overflow:hidden;width:200px;height:100px;border:1pxsolidred;margin:10px;}p{width:400px;text-align:justify;} |
|---|---|
scroll
Wartośćscrollsprawia że pojawia się możliwość scrollowania zawartości. Jeśli zawartość jest mniejsza to scrollbar jest wyłączony i nie można z niego korzystać, natomiast jeśli zawartość jest większa to można przewijać zawartość za pomocą wyświetlonego scrollbara.
| 1 2 3 4 5 6 7 8 91011 | div{overflow:scroll;width:200px;height:100px;border:1pxsolidred;margin:10px;}p{width:400px;text-align:justify;} |
|---|---|
auto
Wartośćautosprawia że jeśli zawartość jest większa to pojawiają się paski do scrollowania, w przeciwnym wypadku nie są one wyświetlane.
| 1 2 3 4 5 6 7 8 91011 | div{overflow:auto;width:200px;height:100px;border:1pxsolidred;margin:10px;}p{width:400px;text-align:justify;} |
|---|---|
Zadanie 1
W tym zadaniu Twoim celem jest ustawienie dla elementu.blockoverflowvisible.
Podsumowanie
Lekcja ta była dość krótka, jednak omówiony materiał na pewno jest przydatny. Tym razem poznałeś dobrze właściwośćoverflow, jej warianty dotyczące wyłącznie osi x lub y, oraz dostępne właściwości.