FAQ version Beta 0.5
Mise en page générale
Appliquer une hauteur de 100% à un élément
Faire un bloc qui utilise toute la hauteur de la fenêtre semble être un mission plus périlleuse qu'il n'y parait.
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
Voici un résumé des différentes possibilités qui donnent un résultat positif avec "height: 100%" sur les deux navitateurs Internet Explorer et Firefox :
* 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 un article complémentaire à celui-ci, expliquant comment faire pour avoir un pied de page toujours positionné en bas.
Note (bis) : le Web n'étant pas un média paginé contrairement au média d'impression, il ne sera pas possible de "restreindre" un affichage à 100% tout en rajoutant du contenu (hormis utilisation de la propriété "overflow"). C'est au concepteur d'adapter ses besoins au média et non l'inverse.
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
Voici un résumé des différentes possibilités qui donnent un résultat positif avec "height: 100%" sur les deux navitateurs Internet Explorer et Firefox :
* 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 un article complémentaire à celui-ci, expliquant comment faire pour avoir un pied de page toujours positionné en bas.
Note (bis) : le Web n'étant pas un média paginé contrairement au média d'impression, il ne sera pas possible de "restreindre" un affichage à 100% tout en rajoutant du contenu (hormis utilisation de la propriété "overflow"). C'est au concepteur d'adapter ses besoins au média et non l'inverse.
Liens complémentaires