Vous avez dit height=100% ?

Faire un bloc qui utilise toute la hauteur de la fenêtre semble être un mission plus périlleuse qu'il n'y parait.

Je me suis laissé dire que la propriété "height" associée à des valeurs en pourcentages posait quelques problèmes.

En effet, donner la valeur "height: 100%" à un bloc ne suffit pas toujours, et pas partout.

Je n'ai aucune source officielle (si vous me trouvez ça, je suis preneur) mais on m'a confié qu'Internet Explorer avait des problèmes avec les div height 100% et que les gecko et Opera comprenaient mal le height 100% appliqué aux tables.

Tout ce que j'ai trouvé est une table comparative des bugs logiciels.

Par définition, une valeur en % s'applique par rapport à une référence. Par exemple : si un conteneur n'a pas de hauteur et qu'il contient un div en height 100%... normalement ce div n'a pas de hauteur puisque celle de son parent n'est pas déterminée (vous me suivez ? :))

Je me suis amusé à faire quelques essais...

Code de base :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
}
#contenu{
width:20em;
height:100%;
position:absolute;
left:0;
top:0;
background-color: yellow;
}
-->
</style>
</head>
<body>
<div id="contenu">test</div>
</body>
</html>

Verdict : OK sur Gecko, pas OK sur IE

A première vue, tout celà est normal. Le bug viendrait d'IE.

Cas du positionnement

2)
#contenu{
width:20em;
height:100%;
background-color: yellow;
}

Verdict : pas OK sur Gecko, pas OK sur IE

Le bloc n'est plus positionné (pas de position absolue ou relative). La hauteur de 100% n'est plus prise en compte sur aucun des deux navigateurs.

Cas des conteneurs body et html

3)
body {
margin: 0;
padding: 0;
height: 100%
}

Verdict : pas OK sur Gecko, OK sur IE

En donnant une hauteur précise à la balise body, on commence à s'en sortir. Positionné ou non, le bloc occupe toute la hauteur sur IE en appliquant un height 100% sur le body. Par contre, si le bloc n'est pas positionné, il n'occupera pas toute la hauteur sur Gecko.

4)
html, body {
margin: 0;
padding: 0;
height: 100%
}

Verdict : OK sur Gecko, OK sur IE

En donnant une hauteur de 100% à tous les blocs parents du document (body ET html), le bloc occupe enfin toute la hauteur de la page sur les deux navigateurs... qu'il soit positionné ou non.

Cas du prologue XML

<?xml version="1.0"?>

Le prologue XML, à placer avant le doctype, fait basculer certains navigateurs dans le modèle de boite (erroné) de Microsoft.

A savoir que le prologue XML n'est pas obligatoire selon les usages que l'on fait du XHTML.
Si on utilise XHTML pour faire du HTML (comme 90% des gens), le prologue n'est pas nécessaire.
Par contre, si XHTML est utilisé comme du XML ou du MathML, le prologue est obligatoire.
De même, il est obligatoire si l'encodage du document est autre que UTF-8 ou UTF-16.

Verdict : Avec le proloque et un positionnement du bloc : OK sur Gecko, OK sur IE

Verdict : Avec le proloque mais sans positionnement du bloc : pas OK sur Gecko, OK sur IE

Conclusion

Voici un résumé des différentes possibilités qui donnent un résultat positif avec "height: 100%" sur les deux navitateurs :

  • Pas de prologue XML + <html> et <body> à height: 100% + Positionnement (relatif ou absolu) du bloc
  • Pas de prologue XML + <html> et <body> à height: 100% + pas de positionnement du bloc
  • Prologue XML + <html> et <body> à height: 100% + Positionnement (relatif ou absolu) du bloc
  • Prologue XML + <html> et <body> à height: 100% + pas de positionnement du bloc

En bref, quel que soit le positionnement, quel que soit la présence du prologue, le critère obligatoire est de donner une hauteur de 100% aux balises <html> et <body>.

Note : vous retrouverez sur Pompage.net [fr] un article complémentaire à celui-ci, expliquant comment faire pour avoir un pied de page toujours positionné en bas.

Par Raphael GOETTER - jeudi 13 mai 2004 à 11:17

Astuces - #3 - Lu 60668 fois - Intérêt du billet: 3.29(79) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le jeudi 13 mai 2004 à 13:10, par mebon :: #

jolie analyse :) j'ajouterai 2 mots sur IE Mac : rien ne marche. quand ça marche pas sur IE PC, ça marche pas non plus sur IE Mac, et quand ça marche sur IE PC, le bloc fait PLUS de 100% de la hauteur de la fenêtre sur IE Mac !

Le jeudi 13 mai 2004 à 13:16, par Sibelius :: #

C'est quoi IE Mac ? ;)
(sérieusement, je n'ai effectivement pas testé sur les browsers Mac... si les utilisateurs de Safari, et autres pouvaient se manifester)

Le jeudi 13 mai 2004 à 13:51, par mebon :: #

lol. en tous cas sur safari j'ai à peu près tout testé et y a pas de soucis, c'est comme Gecko.

Le jeudi 13 mai 2004 à 14:10, par Ldo :: site :: #

safari user, at your command master
ke puis-je pour toi ?

:D

Le vendredi 14 mai 2004 à 08:27, par un visiteur :: #

On peut avoir des liens pour tester immédiatement dans son navigateur ? Comme ça je dirai si ça marche dans Konqueror.

Le vendredi 14 mai 2004 à 10:17, par Sibelius :: #

@un visiteur > Ah tiens non, je n'ai pas pensé à le laisser sur des fichiers, j'ai testé directement sur HTML-Kit

Le vendredi 14 mai 2004 à 12:49, par Kileak :: #

Salut et merci

je t'ai mailé à propos de cette article sur Developpez.com.
Si tu as une seconde ;)
www.developpez.net/forums...

En tous les cas, grâce à toi, j'ai progressé à vitesse V : Alsa+Euroweb le couple gagnant !

Sinon, je sais pas toi, mais il y a vraiment des choses bizarres en XHTML. Difficile de comprendre certains retour à la ligne ou décalage de Div au début de l'exécution d'un JS Dynamique... Enfin bref, si tu es dispo, je me permettrais de te poser qq questions :)

Au plaisir de te lire !

Pierrot


Le samedi 15 mai 2004 à 23:15, par loufoque :: #

Moi je trouve que c'était assez évident dès le début, étant donné que html est le root qui représente le document, il faut donc lui donner la taille nécessaire pour que ses enfants en disposent.
Enfin bref, voici un article un peu plus développé, avec les comportements en fonction du doctype :
www.quirksmode.org/css/10...

Le dimanche 16 mai 2004 à 10:12, par Sibelius :: #

Merci Loufoque pour cet excellent lien que je ne connaissais pas et qui est vraiment clair pour les angophones ;)

Le dimanche 4 juillet 2004 à 16:19, par Xav :: #

Moi j'ai tout de même un problème.

J'ai en effet déclaré un height:100%; dans mon body avec un background qui se répète.

Mais j'ai un DIV id="interface" qui contient toute ma page et limite sa largeur à 700px;
J'ai indiqué que la hauteur était aussi de 100% mais que dans ce conteneur le fond était noir.

En effet le fond est noir, mais pas lorsqu'on descend avec la scrollbar ou c'est le fond du body qui revient.
Bug sous Firefox

Parfait sous IE

une idée ?



@+
Xav

Le dimanche 4 juillet 2004 à 16:27, par Raphael Goetter :: site :: #

@Xav > c'est normal, ce n'est pas un bug. Height 100% signifie "toute la hauteur de la fenêtre". Ensuite, si ton texte fait plus que la hauteur de fenêtre (>100%), ce n'est plus pris en compte. Il faut alors utiliser min-height 100%.

Le mercredi 11 août 2004 à 00:34, par Flusher :: #

J'ai le même problème que Xav, et ta réponse, Raphaël, ne m'éclaire pas beaucoup !
Aurais-tu un exemple s'il te plaît ? :o)
Je me demande s'il ne faut pas user de Javascript pour repositionner dynamiquement le div ou bien le resizer ...

Dur dur ! :)

Le mercredi 11 août 2004 à 09:20, par Sibelius :: site :: #

@Flusher >
Faire un bloc à 100% de hauteur du body signifiera qu'il prendra toute la hauteur de l'écran, mais SEULEMENT de l'écran visible. Si le contenu dépasse cette hauteur d'écran, il dépassera également le bloc.
Il ne faut donc pas utiliser height 100% mais min-height 100% qui laissera ce bloc s'étirer si le contenu est plus haut que 100% de l'écran.

IE buggue sur ce point car il ne tient pas compte de la hauteur spécifiée et l'agrandit si le contenu dépasse.

Le mardi 9 novembre 2004 à 11:05, par jerkev :: #

MERCI, je cherchais la solution depuis longtemps !

Le lundi 6 décembre 2004 à 03:05, par koala01 :: #

J'ai testé la solution proposée, et j'ai obtenu un problème d'apparition d'ascenceur verticaux sur la fenetre elle-meme.

Avec mozilla, il était néanmoins un peu plus petit qu'avec IE (pc)

J'ai réussi à supprimer cet ascenceur vertical en forcant l'attribut overflow: hidden sur <HTML> (peut etre est-ce que ca aurat fonctionné en le mettant sur <BODY>, mais je n'ai pas essayé...)

Le rélultat obtenu est une mise en page (chez moi de style deux colones plus pied) "tirée au cordeau", un peu comme l'aurait fait un frameset.

Le vendredi 22 juillet 2005 à 09:33, par KANA :: #

bonjour,
vous allez peut être pouvoir m'aider:
j'ai besoin de passer par le principe d'une iframe pour charger une page dans une cellule et pour que le contenu s'adapte à la taille de la fenêtre j'ai configuré en height="100%".
avec IE pas de pb, si je redimensionne ma fenêtre le contenu de l'iframe s'adapte à la taille de la fenêtre mais avec firefox, cela ne marche pas.
en fait c'est comme si il ne reconnaissait pas la valeur 100% pour height.
quelqu'un a t il une solution ou une parade à l'iframe pour charger une page dans une cellule (frame ne me convient pas).
merci.

Le vendredi 22 juillet 2005 à 09:44, par Raphael :: site :: #

Bonjour KANA,

Tu devrais passer par le forum, il est fait pour ça (contrairement aux commentaires) ;)

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.

  • CSS2
  • Memento XHTML
  • Le zen des CSS
  • CSS
  • Web accessible