Min-height anche su Internet Explorer

Capita spesso di costruire dei layouts che sfruttino in altezza tutta la risoluzione del monitor dell'utente; è il caso per esempio di ZOOPPA.
Utilizzare l'altezza minima per un div, per esempio quello contenente il contenuto centrale della pagina, è la soluzione ottimale. In questo modo il layout non lascia spazi vuoti in altezza, per esempio sotto al footer (ciò si può notare nelle risoluzioni particolarmente ampie, sempre più diffuse).

Il problema è che mentre Firefox-Opera-Safari implementano la proprietà CSS min-height, Internet Explorer, sia nella versione 6 che nella 7, non la considera. E' questo un limite piuttosto grave del browser di Microsoft. Come fare?
Internet Explorer non supporta l'operatore !important, che permette ad una regola CSS di sovrascrivere le regole che seguono. Ma Internet Explorer ignora bellamente :-) questo operatore. Inoltre Explorer "legge" min-height come se fosse height.

Ecco allora il codice da utilizzare:


#miodiv {
min-height: 400px;
height: auto !important;
height: 400px;
}


La prima riga non è considerata da Internet Explorer. La seconda riga serve ai browser standard-compliant considerati più sopra per sovrascrivere la terza riga, che è quella che in effetti Explorer legge. Importante: in ogni caso, lo ripeto, Explorer interpreta min-height come se si trattasse di height.