Własność CSS max-height

Własność CSS max-height określa maksymalną możliwą 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ść max-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ść max-height określa wysokość całego elementu, czyli obszaru obejmowanego przez krawędzie obramowania.

Wartości i składnia

Własność max-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. Ich szczegółowy opis wraz z przykładami znajduje się w opisie własności CSS height.

Przykład

W tym przypadku element section będzie miał wysokość nie większą niż 300 pikseli:

section {
  max-height: 300px;
}

Zastosowanie

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

Podsumowanie