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 Bug w IE6

Zobacz display:inline-block, jeśli potrzebujesz nadać szerokość elementowi liniowemu. Bug w IE

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 Bug w IE6

Zobacz display:inline-block i line-height, jeśli potrzebujesz nadać wysokość elementowi liniowemu. Bug w IE

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ść Bug w IE6

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 Bug w IE6

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 i auto
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ę.

BoxModel | Krawędzie
Zmodyfikowano: 21.10.2006, 21:45
submit