CSS: la fondamentale differenza tra le proprietà 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 aggiungendo più contenuti al box con classe .min-height.