28111 sujets

CSS et mise en forme, CSS3

Bonjour,

Cela fait 1 an que je suis plongé dans le dév web avec CSS et Cie.
Là j'interviens sur le fameux height:100% qui fait bien des echos depuis longtemps!
J'interviens parceque je croyais avoir tout compris sur son utilisation.
Et là je m'épate de me rendre compte que non! Vous allez peut-être m'expliquer pourquoi.

A la base lorsque je veux un "container" à 100% de hauteur sur la page, ou bien je décide de ne pas utiliser de doctype (suivant l'application que je développe et sachant qu'en principe je respecte au max les normes) ou bien je passe par une interface qui fait illusion d'un height:100% avec un background etc...

Mais voilà que bêtement, après toutes ces années, j'ai écris ça dans mon code CSS:


html, body {height: 100%;} // que j'utilise toujours
#container{position: relative;height:100%;min-height: 100%;} // là j'ai uniquement ajouté position:relative;


Et mon application applique le height:100% sur Ie6 sur Ie7 et sur momo.... Smiley eek Suis-je fou?

Par ailleurs, j'utilise toujours ce doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Je suis pourtant persuadé que ça ne fonctionnait pas avant et qu'il était impossible d'obtenir un height:100%; sur INTERNET EXPLORER.

Dites-moi que j'ai juste bêtement zappé une étape dans ma vie ou dites moi simplement que je suis en train de rêver et que j'ai dû me tromper qlq part car effectivement c'est impossible...En tout cas : chouette c'est jouable ainsi! Smiley biggrin
Je viens de refaire 36 test, ces deux lignes css de code appliquent un height:100% parfaitement et royalement sur IE6/7 sur Mozilla et sur Opera.

Je suis épaté...lol
Modifié par speedev (12 Mar 2007 - 15:45)
si c'est tout à fait possible. IE6 n'interprète pas le min height, mais en fait height agit comme un min hieght. Quand à ie7 et firefox, il suffit de mettre min height. Par contre, il faut mettre le height: 100% uniquement pour ie6, car sur firefox et ie7, height signifie taille minimum et maximum et si tu veux que ton contenu puisses dépasser la hauteur de la fenêtre il faut utiliser min height... Les commentaires conditionnels permettent de facilement régler ce problème.