lundi 8 mars 2010

Créer une div avec une hauteur minimale

Bonjour à tous!

Aujourd'hui je me suis trouvé confronté au problème suivant: créer une div qui devait faire au moins 600px de hauteur sous tous les navigateurs, IE6 inclus, même si le bougre est mort depuis peu ^^.

Après plusieurs essais, voici la solution que j'ai adopté (le site d'origine: http://reignwaterdesigns.com/ad/tidbits/hacks/minimum_height_in_css.shtml) :

Tout d'abord, utiliser la propriété CSS2 min-height:

.monDiv{
    min-height:600px;
}


Ensuite, utiliser la propriété !important de css2 sur un height, qui indique à un navigateur la gérant bien (je veux bien dire autre que Internet Explorer) que pour deux heightidentiques celui noté !important doit être utilisé:

.monDiv{
    min-height:600px;
    height:auto !important;
} 


Enfin, pour notre IE préféré, on rajoute le height qu'il utilisera puisque trouvé en dernier:

.monDiv{
    min-height:600px;
    height:auto !important;
    height:600px;
}


Et voilà, votre div aura une hauteur de 600px au plus :)
Un grand merci à Reign Water, je vous conseille de visiter son blog ne serait-ce que pour le remercier ;)

Twitter