Si la taille de la boite parente n'est pas connue, alors le pourcentage equivaut à auto, ce qui revient à ajuster la taille de la boite au contenu de celle ci.
Pour résoudre le problème, ta balise body doit avoir une taille fixe, par exemple avec ce genre de CSS:
body { position: absolute; top: 0; bottom: 0; width: 100%;}
puis alors la classe:
.mybox { height: 100%;}
fonctionnera (le public applaudit).
A savoir que IE ne sait pas utiliser 'top' et 'bottom' à la fois (ni 'left' et 'right'), pour cela il faut jouer avec des trucs pas standard du tout, du type:
.couvretout { top: 0; height: expression(document.window.offsetHeight) + 'px'; }
(je me souviens plus trop si les noeuds DOM cités ci-dessus sont corrects, je les donne de mémoire)
Donc encore un point, où tu vas te prendre la tête à avoir une version standard, et quelque chose pour IE... dans ce cas je te conseille un truc du genre:
<link rel="stylesheet" type="text/css" href="standard.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="trucPourIE.css" />
<![endif]-->
La CSS trucPourIE.css surcharge les proprietes standards pour satisfaire IE... pas besoin de dire que ca devient vite le bordel de gérer le set d'attributs standard et à coté tous les workarounds pour IE. En tout cas cette solution devrait te permettre de garder une CSS standard CSS 2.1 par exemple, parce que je vois de plus en plus de CSS complètement saccagées par des CSS hacks...
# C'est normal...
Posté par Edouard Gomez . En réponse au message Firebird + CSS + parametre height. Évalué à 3.
http://www.w3.org/TR/CSS21/visudet.html#the-height-property(...)
Si la taille de la boite parente n'est pas connue, alors le pourcentage equivaut à auto, ce qui revient à ajuster la taille de la boite au contenu de celle ci.
Pour résoudre le problème, ta balise body doit avoir une taille fixe, par exemple avec ce genre de CSS:
body { position: absolute; top: 0; bottom: 0; width: 100%;}
puis alors la classe:
.mybox { height: 100%;}
fonctionnera (le public applaudit).
A savoir que IE ne sait pas utiliser 'top' et 'bottom' à la fois (ni 'left' et 'right'), pour cela il faut jouer avec des trucs pas standard du tout, du type:
.couvretout { top: 0; height: expression(document.window.offsetHeight) + 'px'; }
(je me souviens plus trop si les noeuds DOM cités ci-dessus sont corrects, je les donne de mémoire)
Donc encore un point, où tu vas te prendre la tête à avoir une version standard, et quelque chose pour IE... dans ce cas je te conseille un truc du genre:
<link rel="stylesheet" type="text/css" href="standard.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="trucPourIE.css" />
<![endif]-->
La CSS trucPourIE.css surcharge les proprietes standards pour satisfaire IE... pas besoin de dire que ca devient vite le bordel de gérer le set d'attributs standard et à coté tous les workarounds pour IE. En tout cas cette solution devrait te permettre de garder une CSS standard CSS 2.1 par exemple, parce que je vois de plus en plus de CSS complètement saccagées par des CSS hacks...