Un attribut CSS dont je me sers tout le temps quand je fais des sites… le min-height (comme Bernard). Propriété ô combien magique qui permet de définir une hauteur minimale pour un bloc. Cependant, suivant les navigateurs, ça marche ou pas. Donc voici l’astuce machiavélique qui fait que ça fonctionne avec tous les navigateurs (enfin bon, en tout cas sous Internet Explorer 6 et 7, Google Chrome, Firefox 2 et 3, le machiavélisme est fainéant des fois) :
votre_selecteur {
min-height:400px;
height:auto !important;
height:400px;
}
Explications : dans les faits (comme Clochette), min-height est compris par Chrome, FF et IE7, mais pas IE6.
Cependant sous IE6, height possède la même propriété que le min-height. Donc, on ajoute la règle !important qui va faire que :
- Pour FF, IE7 et Chrome height: auto va être préféré à height: 400px; propriété même du !important qui va faire interpréter au navigateur l’attribut possédant la règle !important dans un sélecteur si un attribut est défini plusieurs fois. La hauteur ne va donc pas être fixe, avec une hauteur minimale. Youpi, c’est ce qu’on voulait.
- Pour IE6 (et peut-être inférieur qui sait…), cette ligne de CSS va tout bonnement être ignorée : IE6 ne la comprend pas. IE6 va donc juste interpréter : height 400px; qui, dans le codage douteux d’IE6 je le redis, possède la même propriété que min-height sous les derniers navigateurs.
Petit rappel qui ne fait pas de mal, on ne sait jamais : l’ordre de ces lignes est capital. Bah oui, le CSS c’est pas encore du langage logique, bien que le bordélisme de certaines feuilles de style rappelle la douce insouciance des sessions de Prolog…
C’est loin d’être tout neuf comme astuce, mais si je cherche le petit bout de code qui va bien, maintenant, je sais où il est.
PS : au fait, et tant qu’à faire, ça marche aussi pour max-height, min-width et max-width. C’est pas merveilleux ?
Parce que 
