Proprietà min-height

La proprietà min-height imposta l'altezza minima di un elemento. I valori accettati dalla proprietà sono qualsiasi unità di misura per le dimensioni oppure la parola chiave none, che indica l'assenza di un valore.

Di solito viene impostata per un elemento con larghezza fluida (l'altezza è impostata in percentuale o non è impostata affatto, e l'elemento si espande in altezza in base al suo contenuto).

Se viene impostata un'altezza minima, l'elemento non potrà diventare più piccolo di questa altezza. Se il testo è meno di quanto necessario per min-height, l'elemento avrà un'altezza pari a min-height.

Se invece il testo è di più, l'altezza dell'elemento verrà calcolata in base alla quantità di testo.

Sintassi

selettore {
	min-height: valore;
}

Esempio

In questo esempio l'altezza non è impostata affatto e verrà calcolata autonomamente dal browser in base alla quantità di testo. Tuttavia, poiché è impostata la proprietà min-height, l'altezza non si ridurrà al di sotto di questo valore, anche se all'interno non ci sarà alcun testo:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	min-height: 100px;
	width: 300px;
	border: 1px solid black;
}

Esempio

Aggiungiamo più testo all'elemento - in modo da causare un overflow dell'altezza del blocco. In questo caso il nostro blocco aumenterà semplicemente la propria altezza:

<div id="elem">
	some long text
</div>

#elem {
	min-height: 100px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Esempio

Per confronto, vediamo cosa succede al blocco se rimuoviamo l'altezza minima e invece impostiamo la proprietà height:

<div id="elem">
	some long text
</div>

#elem {
	height: 100px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
	margin-bottom: 50px;
}

Vedi anche

la proprietà max-height,
che imposta l'altezza massima di un elemento
la proprietà max-width,
che imposta la larghezza massima di un elemento
la proprietà min-width,
che imposta la larghezza minima di un elemento