28172 sujets

CSS et mise en forme, CSS3

Hauteur qui ne marche que sur... IE6

Bien le bonjour,
Je tente de faire un site qui fasse toute la hauteur du navigateur. Ce site est en fait une grosse div avec une hauteur de 100%. Dedans, une autre div, avec le texte.

J'ai mis des bordures gauche droite et un fond de couleur sur la div globale. Celle ci est sensée s'agrandir en fonction de la hauteur de la div qu'elle contient.
Sauf que ça ne marche pas. Enfin, sauf sur IE6...

En fait, les bordures prennent bien toute la hauteur de la page, mais uniquement au chargement de celle-ci (comme s'il calculait la hauteur que la div devait prendre en fonction de la taille du navigateur). Conséquence, dès que je scrolle verticalement, les bordures ne vont pas plus loin. Ce qui est étrange c'est que d'après ce que m'affiche CSS Viewer, le div global semble bien prendre toute la hauteur jusqu'en bas du contenu (et non pas juste la taille du navigateur), pourtant l'arrière-plan et les bordures ne suivent pas...

upload/15709-exemple1.gif

Comme je le disais, ça marche sur IE6, nulle part ailleurs (même sur les versions ultérieures d'IE).

Voici le code :

<style type="text/css">
<!--

html, body {
height: 100%;
}

#global {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	border-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-color: #F00;
	height: 100%;
	background-color: #FF0;
}
#content {
height: 100%;
	
}
-->
</style>
</head>

<body>
<div id="global">
<div id="content">
<p>
Lorem ipsum dolor sit amet.... (assez de texte pour obliger à scroller)
</p>
</div>
</div>
</body>

Précision : si je retire le height: 100% des balises html et body, tout marche à nouveau parfaitement... sauf si le contenu fait moins de la hauteur du navigateur. Dans ce cas le div global ne prend plus la hauteur 100%, et ça m'arrange pas non plus Smiley smile
upload/15709-exemple2.gif
Par ailleurs, j'ai laissé la css 100% au div content, mais sa présence ne change rien.

Est-ce que j'ai un moyen de m'en sortir ?
Modifié par Ralf (12 Jun 2009 - 12:13)
Bonjour,

Peut-être en rajoutant : 
min-height:100%;
pour la feuille de style principale plus 
height:100%;
dans une feuille de style dédiée à IE6-et-moins.
Nickel chrome ! (j'avoue que j'avais même pas pensé au commentaire conditionnel, shame on me...)

Par contre je vais laisser le sujet ouvert encore quelques jours, des fois que quelqu'un ait une solution qui marche partout Smiley cligne
Modifié par Ralf (12 Jun 2009 - 15:56)
Bonjour,

Tu demandes une hauteur figée à 100% de la hauteur du parent. Le parent c'est BODY, qui a une hauteur figée à 100% de la hauteur de son parent. Son parent, c'est HTML, qui a une hauteur figée à 100% de la hauteur... de la zone de visualisation du navigateur.

Donc au final ta DIV a une hauteur qui correspond à la hauteur du viewport (zone de visualisation du navigateur). Que le contenu soit faible ou abondant, ça ne change rien. Tu demandes une hauteur figée (propriété height), tu obtiens une hauteur figée, et pis c'est tout.

Donc à priori tu t'es planté dans ta demande. Ce que tu voulais, c'est une hauteur non pas figée, mais minimale. Une hauteur qui dépend de la hauteur du contenu, mais qui fera au moins la hauteur du viewport. Donc, il faut utiliser la propriété min-height, et non pas height.

Donc:
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#global {
  min-height: 100%;
}

Et voilà pour le cas général, standard, logique, etc. Il marche sans problème particulier avec toutes les versions raisonnablement récentes (moins de 6 ans...) des navigateurs web.

Il ne reste alors plus que le cas IE6 à prendre en compte. IE6 ne comprend pas min-height. Et, comme il est vraiment mauvais, il ne comprend pas correctement height non plus. Au lieu de figer la hauteur, il applique height comme une sorte de min-height bâtard. Par chance, ce deuxième bug nous permet (si on le souhaite) de contourner le premier. On peut donc, dans un style appliqué à IE6 uniquement, utiliser height comme un moyen d'émuler min-height.
Sujet clos
Aller à