XHTML et style.height en %

28 juil. 2007, 16:58

Bonjour,

sans la balise <!DOCTYPE>, le code ci-dessous fonctionne parfaitement
les largeurs et hauteurs se recalculent automatiquement au redimensionnement de la fenêtre

avec la balise <!DOCTYPE>,
les largeurs se recalculent automatiquement au redimensionnement de la fenêtre
mais l'attribut de hauteur est complètement ignoré.

les spécialistes XHTML peuvent-ils me donner quelques explications et peut-être une solution propre (des pas propres j'en ai plein mes tiroirs)

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="pragma" content="no-cache">
<head>
    <title>BLABLA</title>
</head>

<body style="color:#FFA;">
      <div style="background-color:#000; width:50%; height:50%">
           coucou
           <div style="background-color:#00F"> bla bla </div>
           <div id="frameDiv" style="background-color:#FF0;width:30%; height:30%">
                fdfd fdfd  fdfdf dfd
           </div>
           <div style="background-color:#0F0; height:20px">au revoir</div>
      </div>
</body>
</html>

30 juil. 2007, 16:42

Donne une hauteur de 100% à ta balise body et à ta balise html... ça devrait aider...
Le problème est que tu ne peux pas définir une hauteur de 100% pour un bloc si son conteneur n'a pas une hauteur fixée.

30 juil. 2007, 17:58

...

Bingo,

IE6 fonctionne correctement sans fixer la hauteur dans la balise HTML,
FireFox a besoin de la hauteur dans la balise BODY et la balise HTML.

si j'ai bien tout compris, ce que tu as écrit et mes tests, la doctype strict invalidait mon paramètre de hauteur au %

le code ci-dessous fonctionne parfaitement dans les 2 navigateurs, les boites suivent le redimensionnement de la fenêtre.

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="height:100%" xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="pragma" content="no-cache">
<head>
    <title>BLABLA</title>
</head>

<body style="color:#FFA; height:95%">
      <div style="background-color:#000; width:100%; height:100%">
           coucou
           <div style="background-color:#00F"> bla bla </div>
           <div id="frameDiv" style="background-color:#FF0;width:30%; height:30%">
                fdfd fdfd  fdfdf dfd
           </div>
           <div style="background-color:#0F0; height:20px">au revoir</div>
      </div>
</body>
</html>

XHTML et style.height en %

Qui est en ligne