Właściwość CSSModel pudełkowy
min-height
Ustala minimalną wysokość, ale pozwala elementowi rosnąć razem z treścią.
- Wartość domyślna
auto- 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.minHeight = "120px"
Przykład
#CSS
.empty-state {
min-height: 120px;
display: grid;
place-items: center;
}HTML przykładu
<div class="empty-state stage">Nie masz jeszcze ukończonych zadań</div>Podgląd
Definicja i zastosowanie
#Właściwość min-height gwarantuje, że element będzie miał co najmniej podaną wysokość. Jeśli treści jest więcej, element po prostu rośnie. To bezpieczniejsza alternatywa dla sztywnego height.
Często spotkasz ją w sekcjach na pierwszym ekranie strony, kartach, które mają mieć równą wysokość, i pustych stanach list, które nie powinny się zapadać.
Gdy min-height jest większe niż height albo max-height, wygrywa min-height.
Składnia
#Składnia
min-height: auto | <długość> | <procent> | min-content | max-content;Wartości
#Wartości w praktyce
#auto
Wysokość wynika wyłącznie z treści.
.demo { min-height: auto; }100px
Element ma co najmniej 100px, a z większą treścią urośnie.
.demo { min-height: 100px; }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
#- Dla sekcji na cały ekran na telefonach lepsze od
100vhsą jednostki100svhalbo100dvh, które uwzględniają pasek adresu. - Karty w jednym rzędzie wyrównasz łatwiej przez Flexbox lub Grid niż przez sztywne
min-height.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.