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ącychabsolutnie 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 % — zależnej od wielkości tekstu.

Wysokość: height Bug w IE6

Zobacz display:inline-blockline-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 — 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%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 widthheight za pomocą min-width, max-width, min-heightmax-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.
scrollauto
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.


Zmodyfikowano: 01.09.2011, 01:41
submit