Mise en page : mélange hauteurs fixes et variables

**mounia.n** · 22/04/2008, 13h10

Bonjour à tous,

j'ai des difficultés pour arriver à faire ma page avec :

un header de hauteur fixe
et un body en dessous qui occupe tout le RESTE de la page

en résumé la partie de mon code concernée donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
.header 
{height:80px;
width:100%;
background-color:#ffffff;}
 
.pageAndMenu
{height:100%;
width:100%;
}

Et ce qui se passe c'est que le body dépasse la largeur de la page car il occupe toute la hauteur restante PLUS la hauteur du header (En gros il occupe 100% d'une page vide et non pas 100% de ce qui reste de ma page avec header).

Auriez vous une idée d'un moyen pour résoudre cela ?
J'ai tenté un :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

height:(100%)-80px;

pour le body mais ça ne donne pas ce que je veux (je sais pas trop s'il est capable d'évaluer un truc pareil).

Merci par avance !!

**Er3van** · 22/04/2008, 13h28

Je suppose que dans ton code tu as qqchose du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<body>
          <div class='header'>
          mon header, avec logo banniere par exemple
          </div>
          <div class='pageAndMenu'>
          ma page et mon menu
          </div>
</body>

J'ai l'impression que tu parles d'un header EN DEHORS du body, ce qui n'est pas concevable il me semble.

Et dans ton css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
body {
     background-color:#777777;} // Pour mieux voir
}
.header 
{
     float:left;
     height:80px;
     width:100%;
     background-color:#ffffff;
}
 
.pageAndMenu
{
    float:left;
    height:600px;
    width:100%;
    background-color:#AAAAAA;
}

Chez moi ça marche, enfin, si j'ai compris ce que tu voulais.

**mounia.n** · 22/04/2008, 14h30

Merci pour ta réponse.

Autant pour moi, je me suis mal exprimée.
Ce que j'appelle "body" c'est le pageAndMenu.
(Pour mon code html j'ai utilisé des tables plutôt que des div ou des spam parce que je découpe ma page en tableaux à différentes dimensions, mais ça ne change rien au principe)

Donc en fait, ce que tu as proposé marche tout à fait, mais ce que je souhaite c'est pouvoir garder une hauteur de page flexible, qui se réajuste en fonction du contenu et de la taille de la fenêtre IE.
Donc je crois que le mieux pour ce que je veux faire c'est de mettre un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

height=auto

Merci encore

**Er3van** · 22/04/2008, 14h41

Pour le coup il ne me semble pas que ça soit vraiment possible....

Mais bon, si tu te bases sur une taille d'écran classique 1024/768, tu retires les cadres fenetres, t'obtiens en gros du 980/740. Pour une hauteur de 740px, 80px ça représente plus ou moins 11%. Donc si tu veux, t'as juste à mettre une hauteur de 89% pour compléter ton body avec ton pageAndMenu.

Par contre, si tu rétrécis la taille de ta fenetre t'auras du scroll, mais on peut pas tout avoir

Si qqun a une meilleure solution j'suis aussi preneur parceque j'vois pas trop comment gérer une taille fixe + une taille variante dans une taille variante...

EDIT : Pour le height auto c'est une solution, mais tu ne rempliras pas toujours l'intégralité de ta page....Mais si ça te convient ^^

**mounia.n** · 22/04/2008, 16h10

Ben écoutes,

j'avoue avoir bidouillé ttaleur et m'être rendue compte qu'avec 87% ça faisait tout pile la taille de la fenêtre en plein écran, donc t'as visé juste

J'hésite encore entre le auto et le 87% qui me rend dépendante d'une taille d'écran... Même si y'a peu de chances qu'on affiche mon petit intranet sur écran géant

En tout cas merci encore pour tes propositions

P.S: oops plusieurs messages sont arrivés avant que j'aie fini mon message (aléats du multitâche..)

**Er3van** · 22/04/2008, 16h13

Je te conseille plutôt de suivre l'idée d'Erwan et de tout mettre dans un div conteneur de taille 100%.

Pour les 95%, je crois qu'on est donc d'accord, 100-4 = 96%, puisqu'au delà de 1024 ma technique marche quasiment pareille ( un petit espace en bas de page franchement négligeable même avec un 1440 ).

**mounia.n** · 22/04/2008, 16h21

Erwan31,

je n'ai pas bien compris en quoi ta proposition de mettre le header dans un conteneur de hauteur 100% va arranger mon problème :
Mon header et mon pageAndMenu sont dans <body>. Je lui ai donc attribué la hauteur 100% dans mon css.
J'ai toujours le même affichage : header de hauteur fixe comme je l'ai définie et pageAndMenu qui n'occupe que la hauteur nécessaire à l'affichage du contenu que j'y ai mis

**Erwan31** · 22/04/2008, 15h13

Envoyé par mounia.n

Donc je crois que le mieux pour ce que je veux faire c'est de mettre un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

height=auto

Bonjour,
c'est inutile puisque auto est la valeur par default de la propriété height, même chose pour width.

Tes width:100% sont inutiles puisque par default un élément de niveau bloc comme les div prend toute la largeur disponible, celle valeur n'est nécessaire qu'avec le positionnement:absolue ou les flottant (dans ce cas de figure).

Pour que le height:100% puisse fonctionner, tu dois avoir déclaré:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Si le height:100% est pris en compte sans cette règle, c'est que tu es en mode Quirks (non standard > à éviter...). Celui-ci est par exemple déclenché si tu n'as pas mis de doctype en haut de ton document.

Solution possible:
Pourquoi ne mets tu pas ton div header dans un conteneur de hauteur 100%?
Ta solution Er3van n'est valable que pour une seule taille d'écran.

**Er3van** · 22/04/2008, 15h25

Effectivement ça marche comme ça, je n'y ait pensé qu'après au div de hauteur 100%.

Ma solution ne marche que pour une taille d'écran 1024/768 de façon optimale certes, mais si l'écran est plus grand ce n'est vraiment visible, et ça marche pour 95% des tailles d'écran du marché pour le coup. Mais c'est sûr que ta solution marche mieux.

**Erwan31** · 22/04/2008, 15h36

Envoyé par Er3van

et ça marche pour 95% des tailles d'écran du marché pour le coup.

Oh là t'y va un peu fort là! C'est pas 95% mais bien moins que ça, je ne me
souviens plus des pourcentages... les écran de taille supérieur représentent
maintenant un % relativement important alors que le 800x600 est proche du 4%
et continue à baisser.

Mise en page : mélange hauteurs fixes et variables

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager