Proprietà CSS min-height

La proprietà min-height imposta l'altezza minima di un elemento. L'elemento può diventare più alto di questo valore quando il suo contenuto necessita di più spazio, ma non può mai diventare più basso. In pratica, min-height pone un limite inferiore all'altezza del box.

Questo è utile ogni volta che si desidera una quantità garantita di spazio verticale anche quando c'è poco o nessun contenuto — ad esempio, un banner hero, una card o un footer che dovrebbe sempre apparire sostanziale indipendentemente da quanto testo contenga.

Come min-height interagisce con height e max-height

Le tre proprietà di altezza vengono risolte insieme dalle regole di dimensionamento del browser:

Se l'height calcolata è minore di min-height, l'elemento viene portato a min-height (il minimo prevale).
Se l'height calcolata è maggiore di min-height, min-height non ha effetto.
min-height ha sempre la precedenza su max-height: quando i due valori sono in conflitto, l'elemento è alto almeno min-height anche se ciò supera max-height.

Quindi l'altezza effettiva viene limitata nell'intervallo min-height ... max-height, e il contenuto che eccede tale intervallo è governato dalla proprietà overflow.

La proprietà accetta una lunghezza CSS (px, em, rem, vh, ecc.) oppure una percentuale.

Informazione

Un min-height espresso come percentuale viene calcolato rispetto all'altezza dell'elemento genitore. Se il genitore non ha un'altezza impostata esplicitamente, la percentuale viene trattata come 0 (cioè non ha effetto) — una fonte comune di confusione. I valori negativi non sono mai accettati.

Valore iniziale	0
Si applica a	Tutti gli elementi, tranne gli elementi inline non sostituiti, i gruppi di colonne e le colonne di tabella.
Ereditato	No.
Animabile	Sì. L'altezza è animabile.
Versione	CSS2
Sintassi DOM	object.style.minHeight = "100px";

Sintassi

Sintassi della proprietà CSS min-height

min-height: auto | length | percentage | calc() | initial | inherit;

Esempio della proprietà min-height:

Esempio della proprietà CSS min-height con valore px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        min-height: 50px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Min-height property example</h2>
    <div>The text area's minimum height is defined as 50px.</div>
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio della proprietà min-height specificata come "3cm":

Esempio della proprietà CSS min-height con valore cm

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #ccc;
      }
      p.example {
        min-height: 3cm;
      }
    </style>
  </head>
  <body>
    <h2>Min-height property example</h2>
    <h3>Min-height: auto.</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <h3>Min-height: 3cm.</h3>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Provalo tu stesso »

Utilizzo di parole chiave basate sul contenuto

Oltre alle lunghezze e alle percentuali, min-height accetta parole chiave di dimensionamento intrinseco che basano il minimo sul contenuto stesso:

min-content — l'altezza minima che il contenuto può assumere senza overflow (approssimativamente l'altezza quando è a capo il più possibile).
max-content — l'altezza che il contenuto assumerebbe se non fosse mai costretto ad andare a capo.
fit-content() — si limita allo spazio disponibile ma non supera mai max-content.

Queste opzioni sono utili quando si vuole che un box sia "alto quanto il suo contenuto, ma mai meno di quello," senza dover specificare un valore in pixel.

Un caso d'uso comune: estendersi per riempire un contenitore flex

min-height: 100vh è un pattern popolare per i layout con "footer fisso" — rende un wrapper alto almeno quanto il viewport così il footer si trova in fondo anche nelle pagine brevi, consentendo comunque alla pagina di crescere quando il contenuto è lungo:

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* at least the full viewport, but can grow */
}

.page main {
  flex: 1; /* pushes the footer to the bottom */
}

Poiché si tratta di un minimo, il layout non taglia mai il contenuto lungo — il box semplicemente si espande oltre 100vh. Abbinalo a box-sizing: border-box in modo che padding e bordi non si aggiungano inaspettatamente all'altezza calcolata.

Valori

Valore	Descrizione	Provalo
auto	Il browser calcola e seleziona un min-height per l'elemento dato.	Provalo »
length	Definisce l'altezza minima in px, em, rem, ecc. Il valore predefinito è 0.	Provalo »
%	Imposta l'altezza minima come percentuale dell'altezza del genitore.
calc()	Calcola l'altezza minima utilizzando un'espressione.	Provalo »
fit-content()	Imposta l'altezza minima in base alla dimensione del contenuto, limitata allo spazio disponibile.	Provalo »
max-content	Imposta l'altezza minima all'altezza massima intrinseca del contenuto.	Provalo »
min-content	Imposta l'altezza minima all'altezza minima intrinseca del contenuto.	Provalo »
initial	Fa sì che la proprietà utilizzi il suo valore predefinito.	Provalo »
inherit	Eredita la proprietà dal suo elemento genitore.

Esercitati

Pratica

Cosa fa la proprietà 'min-height' in CSS?

Imposta l'altezza minima di un elemento.Imposta l'altezza massima di un elemento.Non esiste una proprietà 'min-height' in CSS.Permette di impedire a un box CSS di ridursi oltre una certa dimensione.Definisce l'altezza esatta di un elemento.

Proprietà correlate

height — imposta l'altezza preferita di un elemento.
max-height — limita quanto può diventare alto un elemento.
min-width — il corrispettivo orizzontale di min-height.
box-sizing — controlla se padding e bordi vengono conteggiati nell'altezza.
overflow — decide cosa succede quando il contenuto supera il box.