Własność CSS height

Własność CSS height określa wysokość elementu. Sposób jej działania różni się w zależności od ustawienia własności box-sizing, czyli wybranego modelu polowego CSS.

Jeśli włączony jest standardowy model polowy, to własność height określa wysokość obszaru treści, do której następnie dodawane są obszar dopełnienia i obramowania.

Jeśli natomiast włączony jest alternatywny model polowy, to własność height określa wysokość całego elementu, czyli obszaru obejmowanego przez krawędzie obramowania.

W przypadku, gdy treść nie mieści się w przestrzeni wyznaczonej przez własność height, sposób postępowania określa własność overflow.

Wartości i składnia

Własność height jako wartość przyjmuje liczby z jednostką długości, wartości procentowe oraz słowa kluczowe: auto, fit-content, max-content i min-content.

• Liczba z jednostką długości
• Wartość procentowa: odnosi się do wysokości bloku zawierającego.
• Słowo kluczowe auto: domyślne ustawienie pozwalające przeglądarce określić wysokość elementu na podstawie jego właściwości, tzn. tego czy jest to element blokowy, śródliniowy itd.
• Słowo kluczowe fit-content: pole elementu zajmuje dostępną przestrzeń w pionie do granicy wewnętrznego rozmiaru elementu. Mówiąc prościej, wysokość pola jest dostosowywana do wysokości jego treści.
• Słowo kluczowe max-content: wysokość pola elementu jest równa maksymalnej wysokości treści.
• Słowo kluczowe min-content: wysokość pola elementu jest równa minimalnej wysokości treści.

Przykłady

Najprostszy sposób użycia własności height to np. nadanie jej wartości w pikselach. W poniższym przykładzie element nav będzie miał wysokość 100 pikseli:

nav {
  height: 100px;
}

Z kolei w tym przykładzie element nav będzie miał 120 pikseli wysokości, ponieważ została ona ustawiona na 30% wysokości bloku zawierającego, która wynosi 400 pikseli (30% z 400 wynosi 120).

<style>
div {
  height: 400px;
}
nav {
  height: 30%;
}
</style>
<div>
  <nav>Lorem ipsum dolor sit amet.</nav>
</div>

Zastosowanie

Własność height ma zastosowanie do wszystkich elementów HTML z wyjątkiem śródliniowych elementów niezastępowanych, wierszy tabeli i grup wierszy tabeli.

Podsumowanie