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 aggiungendo più contenuti al box con classe .min-height.