dhjapan a écrit :
Pourquoi pas toujours ?
Si le parent du bloc auquel tu donnes une hauteur de 1% n'a pas lui-même de hauteur (c'est à dire que sa hauteur dépend de son contenu), le
height: 1% est censé être ignoré. Par contre, si le parent a une hauteur déterminée (et applicable, c'est à dire pas une hauteur en pourcentage alors que son propre parent n'aurait pas de hauteur déterminée, etc.), le
height: 1% est appliqué. D'où, je suppose, la différence.
Solution: ne pas utiliser à la fois
height: 1% et
overflow: hidden.
Reprenons: la solution standard est d'utiliser un
overflow: auto ou
overflow: hidden pour empêcher le dépassement des flottants. Comme le
overflow: auto déclenche parfois l'apparition de barres de défilement parasites avec certains navigateurs, et que la propriété
overflow est justement utilisée pour éviter que des éléments ne dépassent du bloc, on préfèrera alors l'utilisation de
overflow: hidden.
Problème: avant sa version 7, Internet Explorer ne génère pas de
contexte de formatage via la propriété
overflow*. Pour y palier, on utilise le HasLayout, généralement via une des déclarations suivantes:
-
width: <tout sauf "auto">; (généralement, si le bloc n'a pas déjà de largeur, et pas de padding/border:
width: 100%;);
-
height: <tout sauf "auto">; (généralement, si le bloc n'a pas déjà de hauteur:
height: 1%;
-
zoom: 1; (fonctionne avec IE6+ uniquement).
Le plus classique est le
height: 1%, mais pour ma part je préfère utiliser un
width: 100% lorsque je le peux.
Quoi qu'il en soit, on est bien d'accord que ce correctif s'applique à Internet Explorer pour Windows, version 5 et 6 (pas nécessaire pour la version 7... quant à la version 4, elle est négligeable, pour ne pas dire morte et enterrée). Donc si c'est pour IE 6 et inférieurs uniquement, on adresse ce correctif CSS via un commentaire conditionnel qui va bien.
→ Voir la FAQ du forum pour les commentaires conditionnels.
Si on utilise le
height: 1%, toujours via le commentaire conditionnel, on aura donc intérêt à utiliser également un
overflow: visible pour annuler le
overflow: hidden.
Quant aux navigateurs hors IE 5-6... ils ne verront pas la couleur du
height: 1%, donc pas de problème.
Voilà, je crois qu'on a fait le tour.
----
* Je m'avance peut-être un peu. Toujours est-il que
overflow: auto|hidden n'empêche pas le dépassement des flottants dans IE5-6.
