28221 sujets

CSS et mise en forme, CSS3

{height: 100%} est-il calculé par rapport la valeur de width ?

Bonjour Smiley biggrin ,

C'est un vieux sujet, mais ne me renvoyez pas aux tutos que j'ai lus avec profit.

C'est l'histoire du problème de la hauteur avec le DIV centré au centre du body.


html, body {height: 100%;}
body {text-align: center; background: #C0C0C0;}
div#tout {width: 600px; height: 100%; margin-left: auto; margin-right: auto; text-align: left; background: #FFFFFF;}


Tout y est, non ?
Cependant, sur Mozilla/Mac, j'ai l'impression que le height est calculé selon le width... C'est à dire que, si ma page fait plus de 600 px de haut, ce qui est en dessous de 600px s'affiche dans le background du body, pas terrible.
IE/Mac réagit plus subtilement. Si la page nécessite plus de 600 px de haut, en gros il double la hauteur, on se trouve avec une page de 1 200 px de haut... Pas terrible non plus, mais moins grave.

Une solutionlaborieuse est d'ajuster le height avec une valeur supérieure à 100 %

{height : 130%} est bien compris par Mozilla/Mac et ne pose pas de problème à IE5/Mac qui reste dans sa logique bestiale.

Mes questions :
1) Je m'attendais à ce que {height: 100%} affecte simplement toute la hauteur nécessaire à la page, ai-je faux ?
2) Mon code de base est-il correct ?
3) Avez-vous les mêmes problèmes sur PC, je n'ai pas testé.

MERCI d'avance.
Normalement la hauteur du height se fait en fonction de la fenetre du navigateur, si cette dernière fait 500px de haut, les 100% correspondront à 500px. Dans un tel cas, si le contenu depasse les 500px, des ascenseurs apparaissent, si l'on descend, on s'aperçoit que le contenu déborde car le conteneur reste à "500px". IE et Konqueror quant à eux ne tiennent pas compte de cette hauteur de fenetre.

Eric
Merci de ta réponse.

Si je comprends, mon approche {height: 130%} est nécessaire.

C'est pas très pratique, surtout si le contenu de ta page est dynamique et que la hauteur est indéterminée, il faut alors créer la valeur de height côté serveur, une variable de plus.
Sur ma feuille de style, j'ai :

html, body {padding: 0; margin: 0;}

C'est bon, non ?

Là, j'ai repris juste les trucs relatifs au height, histoire de pas trop charger le message.

Merci de ton intérêt.
Excusez, la solution ci-dessus n'est pas la meilleure.

Le plus simple est de ne donner AUCUNE indication de hauteur, ni dans le body ni dans le DIV principal (id="tout").
De cette manière, le DIV prend la hauteur nécessaire au contenu, ni plus ni moins.

Si cette hauteur est inférieure à celle de l'écran, certains navigateurs afficheront logiquement la page comme une sorte de fenêtre entourée, y compris en bas, par le background du body, ce qui est inhabituel mais pas laid.

J'espère que c'est clair. Smiley murf
Sujet clos
Aller à