Che differenza c'è tra le proprietà CSS height e min-height?

Molti web designer pensano che le proprietà CSS height e min-height funzionino nello stesso modo. In realtà non è così: esiste una fondamentale differenza che è bene comprendere prima di realizzare layout complessi.

La proprietà height impone una restrizione che i browser devono rispettare ma qualora il contenuto dell'elemento superi l'altezza dichiarata esso fuoriuscirà dall'elemento, a meno che la proprietà overflow non lo impedisca.

La proprietà min-height, invece, impone una restrizione solo per quanto riguarda l'altezza minima di un elemento. Il contenuto dell'elemento in questo caso è libero di espandersi in altezza.

La differenza è evidente se usate uno sfondo per gli elementi:

.box {
	background: silver;
}

.height {
	height: 300px;
}

.min-height {
	min-height: 300px;
}

I risultati saranno evidenti.