In questo breve articolo vedremo come poter assegnare o emulare in maniera consistente e
cross-browser la proprietà min-height. Questa proprietà, che serve per specificare
l'altezza minima di elementi block-level si può rivelare molto utile in diversi casi.
Purtroppo però non è supportata da Internet Explorer fino alla versione 6 inclusa,
mentre lo è in IE7. IE7 supporta infatti min-height, max-height, min-width e max-width
ma queste quattro proprietà molto utili sono praticamente ignorate nelle versioni precedenti.
Nell'articolo Dieci
consigli per prepararsi a Internet Explorer 7 abbiamo visto
come attraverso il commento condizionale sia possibile assegnare una larghezza minima e massima
(solo in pixel purtoppo) anche a IE5, IE5.5 e IE6 attraverso il commento condizionale.
In realtà, per ciò che riguarda min-height, le cose sono un po' più semplici.
Ci sono diverse soluzioni per emulare questa proprietà anche su IE5.x e IE6:
alcune di esse usano hack e sono complicate più del dovuto. Qui vedremo una soluzione
semplice che non richiede hack, ha una buona compatibilità e dovrebbe essere a prova di futuro.
Siamo cosÏ pronti a presentare l'esempio in cui ci sono tre div affiancati, ciascuno largo
180 pixel e con altezza minima di 200 pixel. Nel caso dell'esempio ho attribuito una classe
"box" ai tre div, rendendoli float. In casi reali sarebbe opportuno usare un nome di classe meno generico,
o ancora meglio i selettori di id o discendente. La tecnica, ovviamente, funziona anche su div
non float.
Prima di procedere con il CSS, c'è un dettaglio implementativo di IE fino alla versione 6
che è bene introdurre. Questi browser infatti non hanno il supporto della proprietà
min-height ma in realtà, come si accennava, la si può emulare. Il contenuto di elementi con altezza
stabilita infatti, qualora questo ecceda il suo contenitore, verrà semplicemente reso al
suo interno, che non onorerà l'altezza dichiarata ma si allungherà di conseguenza.
Questo comportamento di IE5.x e IE6 è proprio quello che ci serve: basterà infatti
far di modo che gli altri browser riconoscano un altezza auto-adattante al contenuto
(specificata proprio attraverso il valore auto) e un'altezza minima
attraverso la proprietà min-height.
Dato che IE, fino alla versione 6, non aderisce alle specifiche rispetto alla
keyword !important, faremo leva su questa mancanza per servire un'altezza specifica
solo a IE 5.x e IE6, come abbiamo fatto per il box model in questo
post del blog. Ecco quindi le tre dichiarazioni chiave dell'esempio:
div.box{
height: auto !important; /* per i browser moderni */
height: 200px; /* per IE5.x e IE6 */
min-height: 200px; /* per i browser moderni */
}
Riepilogando: la prima dichiarazione serve per i browser moderni che supportano min-height:
tutti questi browser obbediscono anche alla keyword !important, in grado di ridefinire la priorità
delle dichiarazioni rispetto al loro ordine e/o specificità, per specificare quindi un'altezza auto-adattante.
La seconda dichiarazione serve per emulare min-height su IE5.x e IE6. La terza, infine,
servirà min-height ai browser che la supportano.
L'esempio è stato testato con successo su Internet Explorer 5.0, 5.5, 6, 7 e sulle ultime
versioni di Opera, Firefox e Safari. Alla prossima.
