Vous avez dit height=100% ?
Actualité par Raphael (Eleveur de kiwiz, Strasbourg)
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.
60
