Właściwość CSSModel pudełkowy
max-height
Ustala maksymalną wysokość elementu.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- tak, jako długość lub procent
- Dotyczy
- wszystkie elementy poza liniowymi niezastępowanymi (np. `<span>`), wierszami i grupami wierszy tabel
- JavaScript
element.style.maxHeight = "200px"
Przykład
#CSS
.chat {
max-height: 120px;
overflow-y: auto;
}HTML przykładu
<div class="chat stage">
<p>Ola: Hej, zrobiłaś już moduł z Flexboxem?</p>
<p>Ania: Tak, zostało mi tylko zadanie podsumowujące.</p>
<p>Ola: Super, ja utknęłam na align-items.</p>
<p>Ania: Pamiętaj, że działa na osi poprzecznej!</p>
</div>Podgląd
Definicja i zastosowanie
#Właściwość max-height nie pozwala elementowi urosnąć ponad podaną wartość. Nadmiar treści zachowuje się wtedy zgodnie z właściwością overflow: domyślnie wystaje poza element.
Najczęściej łączy się ją z overflow: auto, żeby długie listy, okna czatu czy rozwijane menu miały pasek przewijania zamiast rozpychać stronę.
Dawniej animowano max-height do rozwijania sekcji. Działa to, ale wymaga zgadywania wartości końcowej, więc dziś częściej sięga się po <details> albo animację grid-template-rows.
Składnia
#Składnia
max-height: none | <długość> | <procent> | min-content | max-content | fit-content;Wartości
#- Brak ograniczenia. Lista jest tak wysoka, jak jej treść.
<długość>
Lista ma najwyżej 60px, a reszta pozycji wystaje poza nią.z overflow: auto
Połączenie zoverflow: autodaje przewijaną listę.
Wartości w praktyce
#none
Brak ograniczenia. Lista jest tak wysoka, jak jej treść.
.demo { max-height: none; }60px
Lista ma najwyżej 60px, a reszta pozycji wystaje poza nią.
.demo { max-height: 60px; }60px + overflow
Połączenie z
overflow: auto daje przewijaną listę..demo { max-height: 60px; overflow: auto; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Samo
max-heightbezoverflowsprawi, że treść wyjdzie poza element. Prawie zawsze dodawajoverflow: auto. - Na przewijanych panelach ustaw też
overscroll-behavior: contain, żeby przewijanie nie przechodziło na całą stronę.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.