Style boksów — Wymiary
Wysokość i szerokość w CSS ma odmienne zachowanie. Strony mają tendencję do wypełniania całej szerokości ekranu, ale nie wysokości, dlatego bardziej skomplikowane jest umieszczenie kilku elementów obok siebie w poziomie, niż w pionie oraz trudniejsze jest rozciąganie elementów na całą wysokość, niż szerokość.
Szerokość: width
Ustala szerokość zawartości elementów. Wyjątek stanowią elementy inline, którym nie można nadać wymiarów.
Jeśli zawartość elementu nie zmieści się w podanych wymiarach nastąpi przepełnienie.
Wartości:
- absolutne wartości
-
bez niespodzianek — np.
10px
oznacza, że element będzie miał 10 pikseli szerokości. - auto
-
ma różne znaczenie w zależności od typu obiektu.
Dla elementów pływających i absolutnie pozycjonowanych oznacza wielkość dopasowaną do zawartości.
Dla zwykłych (statycznych) elementów blokowych oznacza całą dostępną szerokość pomniejszoną o margines, obramowanie i padding (przy szerokości 100% padding i ramka by wystawały poza rodzica — zob. BoxModel). - procenty
- procentowa szerokość elementu nadrzędnego (lub elementu zawierającego dla elementów absolutnie pozycjonowanych).
Elementom, które zawierają tekst najlepiej nadawać wielkość w jednostkach em
— zależnej od wielkości tekstu.
Wysokość: height
Zobacz display:inline-block
i line-height
, jeśli potrzebujesz nadać wysokość
elementowi liniowemu.
Ustala wysokość zawartości elementów. Wyjątek stanowią elementy inline, którym nie można nadać wymiarów.
Jeśli zawartość elementu nie zmieści się w podanych wymiarach nastąpi przepełnienie.
- absolutne wartości
-
bez niespodzianek — np.
20em
to 20 linii. Lista jednostek. - auto
- minimalna wysokość zawartości (to jest domyślna wartość)
- procenty
- procentowa wysokość elementu nadrzędnego (lub elementu zawierającego dla elementów absolutnie pozycjonowanych). Działa tylko w określonych przypadkach — zobacz poniżej.
Wysokość w procentach
Wysokość podana w procentach działa tylko w prostych przypadkach:
<div style="
height:250px
">
<div style="
height:100%
" />
</div>
Powyższy przykład zadziała, bo wiadomo, że wysokość wewnętrznego <div>
to 100%
z 250px
.
<div>
<div style="
height:100%
" />
</div>
Ten przykład nie zadziała, bo wiadomo tylko, że chodzi o 100%
, ale nie wiadomo z jakiej konkretnej wysokości. Paradoks bardziej widoczny jest w takim przypadku:
<div>
<div style="
height:100%
" />
<div style="
height:100%
" />
</div>
Zewnętrzny <div>
ma mieć wysokość jak jego zawartość, ale jego zawartość jest dwa razy większa od niego. W rezultacie wychdzi na to, że <div>
ma być dwa razy większy od siebie samego...
Dlatego, żeby uniknąć paradoksów CSS wprowadza ograniczenie dla elementów statycznych (czyli tych, które nie są np. absolutnie pozycjonowane): wysokość w procentach nie działa, jeśli wysokość nadrzędnego elementu jest automatyczna (auto
).
Ze względu na to ograniczenie wysokości i ograniczeniu pozycjonowania tabel nie ma żadnej możliwości rozciągnięcia elementu na całą
wysokość komórki tabeli (można najwyżej wypełnić komórki elementami o stałej wysokości), a jedynym sposobem umieszczenia czegokolwiek względem dolnej krawędzi komórek jest vertical-align
.
Minimalna i maksymalna wielkość
Można ograniczyć zakres działania width
i height
za pomocą min-width
, max-width
, min-height
i max-height
.
width: 50%;
max-width: 600px;
min-width: 20ex;
Element, który ma 50% szerokości, ale nie więcej niż 600 pixeli i nie mniej, niż ok. 20 znaków.
min-width
/min-height
ma pierwszeństwo nad max-width
/max-height
Nadmiar: overflow
Jeśli element ma nadane konkretne wymiary i jego zawartość się w nim nie mieści, to następuje przepełnienie. Może ono być widoczne na różne sposoby:
-
visible
- Zawartość będzie wystawać poza element. To jest domyślne zachowanie.
-
hidden
- Zawartość zostanie przycięta do wymiarów elementu. Nadmiar będzie niewidoczny.
-
scroll
iauto
-
Element będzie miał paski przewijania, które pozwolą zobaczyć nadmiarową treść. W przypadku wartości
auto
paski przewijania pojawią się tylko wtedy, gdy to konieczne.
Jeśli chcesz, żeby element się rozciągał do wielkości zawartości, to nadaj mu min-width
/min-height
zamiast width
/height
.

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.
Zmodyfikowano: 21.10.2006, 21:45