min-height

Wartości

• auto – domyślnie: brak granicy przy zwykłych elementach, minimalna wysokość treści przy elementach flex i grid.
• długość – np. 200px, 100vh, 100dvh.
• procenty – wysokości rodzica, tylko gdy rodzic ma ustaloną wysokość.

Wartość początkowa: auto. Dziedziczona: nie. Dotyczy: wszystkich elementów oprócz liniowych, kolumn tabeli i grup kolumn.

Przykłady

Krótka treść dostaje wysokość 80 px, dłuższa podwyższa element:

<div class="card">Krótki tekst.</div>
<div class="card">Dłuższy tekst, który nie mieści się w jednym wierszu i potrzebuje więcej miejsca. Element rośnie, żeby tekst się zmieścił i nic nie wychodziło poza niego.</div>

.card {
  width: 220px;
  min-height: 80px;
  margin-bottom: 8px;
  padding: 8px;
  background: #eaf7ff;
  border: 1px solid #38b8f9;
}

Stopka zawsze przy dolnej krawędzi okna, także na krótkiej stronie – strona jest kolumną flex co najmniej tak wysoką jak okno, a główna treść zajmuje wolne miejsce:

<body>
  <header>…</header>
  <main>…</main>
  <footer>…</footer>
</body>

body {
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}

Na co uważać

• Jeśli min-height jest większe niż max-height albo height, wygrywa min-height.
• Rodzic z min-height nie ma „ustalonej wysokości” – dziecko z height: 100% się do niej nie dopasuje. Rozwiązuje to Flexbox albo Grid na rodzicu.
• Starsze przeglądarki nie znają jednostki dvh; dla nich napisz wcześniej wiersz ze 100vh (przeglądarka bierze ostatnią wartość, którą rozumie).

Obsługa w przeglądarkach

Baseline – szeroko dostępne: działa we wszystkich popularnych przeglądarkach, i to od dawna (najpóźniej od 2015 roku). Od wersji: Chrome 1, Firefox 3, Safari 1.3. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
height
max-height
min-width