Mise en page : mélange hauteurs fixes et variables

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

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, 12h28

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, 13h30

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, 13h41

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 ^^

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

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, 14h25

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, 14h36

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.

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

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, 15h13

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, 15h21

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

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

Effectivement, en testant l'autre methode ça ne change rien :S
C'est en fait logique, le conteneur joue le même rôle que le body, donc même cause, même effet.
Par contre il me semblait qu'il y avait une façon similaire de faire, il manque peut-être juste un argument.

J'ai recompté, et la hauteur si on retire tout cadre c'est 666 px sur un 1024, ce qui fait que 80px représentent 12%, donc 88 serait mieux que le 89 au pifometre de tout à l'heure, mais 87%, si ça marche, c'est forcément bon ^^

**mounia.n** · 22/04/2008, 15h46

Je chercherai de nouveau un peu plus tard quand j'aurai du temps
si je trouve qque chose dans un éclat de génie je vous le ferai savoir

en attendant la bidouille me tente...

Merci à vous

**Erwan31** · 22/04/2008, 18h51

Envoyé par mounia.n

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

Déjà relis ce que j'ai essayé de t'expliquer plus haut (mode Quirks) car si c'est bien le cas, tu vas être confronté a un certains nombre de problèmes...

Je te conseillerais d'éviter ces calculs de % pas suffisament fiables.
La solution que je te propose est pourtant assez simple et évite de faire des calculs de % qui ne mèneront de toute façon pas à des résultat similaires d'une résolution à l'autre.

**mounia.n** · 23/04/2008, 15h09

J'ai bien lu ce que tu as dit, j'ai compris ce qu'il y avait à comprendre à savoir que :

je devais déclarer
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
body, html {height: 100%; margin:0; padding:0}
```
C'est fait.
qu'il faut éviter le mode non standard Quirks (j'avais bien mis un doctype)

A priori, je suis donc en mode standard, j'ai mis le div header dans body qui est donc un conteneur de taille 100%. Je n'ai toujours pas ce que je veux.
C'était ça que tu suggérais ?

**Erwan31** · 23/04/2008, 15h30

Bonjour,
ne te sers pas de body comme conteneur.

Je te suggérais une structure du genre:

Code :

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

1
2
3
4
5
6
<body>
       <div id="container">
            <div id="header"></div>
            <div id="pageAndMenu"></div>
       </div>
</body>

Avec le container à 100% de hauteur.

Privilégies les id plutôt que les class. Les id servent essentiellement à identifier un bloc (une division) unique dans la page (header, footer...).

Pourquoi veux tu faire descendre ton bloc pageAndMenu en bas de la zone de visualisation? Qu'est ce que tu veux obtenir exactement?

**mounia.n** · 23/04/2008, 17h09

En fait voilà :
je veux une page sur 4 niveaux classiques :

header
petite barre d'outils
corps de page
- à gauche, un menu vertical
- à droite le contenu à proprement parler de la page (je vais mettre une barre qui retrace le chemin de navigation tout en haut de cette partie)
footer

J'ai donc représenté ça par des div (j'ai bien remplacé mes class par des id à chaque fois que j'identifie un élément unique comme tu le suggères, c'est vrai que c'est plus logique). Ca me donne la structure globale suivante en html (que j'ai placé dans un div container):

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
20
21
22
<div id="container">
	<div id="header">
		<div id="leftHeaderSpace"></div>
		<div id="rightHeaderSpace"></div>
	</div>	
	<!--horizontal toolbar-->
	<div id="headerToolbar">
		<a href="#" class="toolbarItem">Contact</a><a href="#" class="toolbarItem">Help</a>
	</div>
 
	<div id="pageAndMenu" >
		<!--left menu-->
		<div id="verticalMenu"></div>	
		<!-- right page -->
		<div id="rightSpace"></div> <!--fin rightSpace-->		
	</div> <!--fin pageAndMenu-->
 
	<!--horizontal footer toolbar-->
	<div id="footerToolbar">
		<a href="#" class="toolbarItem">item1</a><a href="#" class="toolbarItem">item2</a>
	</div>		
</div>

Pour ce qui est de mon css, j'ai des choses à gérer qui me donnent un peu de mal... à cause du float.. Je pense avoir compris le principe mais je lutte encore, donc faut pas relever sur mon code :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
body , html{
height:100px;
width:100px;
margin:0;
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;}
 
#container 
{height:100%;
width:100%;
margin:0;
padding:0;
}
 
#header 
{
width:100%;
height:90px;
/*border: 1px solid #C2C3C4;*/}
 
#pageAndMenu
{height:87%;
width:100%;
}
 
#verticalMenu 
{float:left;
width:170px;
height:100%;
vertical-align:top;
padding-top:15px;
border-bottom: 1px solid #C1C1C1;}
 
#rightSpace
{float:right;
width:100%-170px;
height:100%;
border-left: 1px solid #C1C1C1;
background-image: url("../images/grid2_orange.gif");}
 
#headerToolbar {
clear:both;
background-image:url("../images/grisDegrade.bmp");
height:20px; 
width:100%;}

voilà, tu as touuuuutes les infos sur ce que je veux obtenir.
Pour ta proposition du container à 100%, comme tu peux le voire je l'ai adoptée, mais ça fait toujours un dépassement de la page en hauteur, il n'y a que le bidouillage du 87% qui me donne ce que je veux.
Encore une fois j'insiste, j'ai extrait une partie de mon code donc s'il y a de petites erreurs de copier coller, faut pas relever..

Merci

**Erwan31** · 23/04/2008, 19h06

Tu as des déclaration en trop et des erreurs d'inattention.
Essayes avec çà:

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
body , html{
height:100%;
width:100%;
margin:0;
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;}
 
#container {height:100%;}
 
#header 
{
height:90px;
/*border: 1px solid #C2C3C4;*/}
 
#pageAndMenu {height:87%;}
 
#verticalMenu 
{float:left;
width:170px;
height:100%;
padding-top:15px;
border-bottom: 1px solid #C1C1C1;}
 
#rightSpace
{overflow:hidden;
height:100%;
border-left: 1px solid #C1C1C1;
background: url(../images/grid2_orange.gif);}
 
#headerToolbar {
clear:both;
background:url(../images/grisDegrade.bmp);
height:20px; 
}

Code :

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

width:100%-170px;

Les opérations ne sont pas possible en CSS, tu dois attribuer une marge-gauche de 170px c'est tout.
Dans mon exemple j'ai mis un overflow:hidden qui comporte certains avantages.
Attention le bmp n'est pas très conseillé > format lourd

Il existe une solution a ton problème: le tableau de mise en forme:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table style="height:100%; width: 100%;">
  <tr>
    <td id="header"></td>
  </tr>
  <tr>
    <td>
        <div id="verticalMenu"></div>	
        <div id="rightSpace"></div>
   </td>
  </tr>
  <tr>
    <td id="footer"></td>
  </tr>
</table>

**mounia.n** · 24/04/2008, 09h32

Bonjour,
Effectivement il y avait plein de déclarations superflues, c'était un petit excès de zèle à force de pas réussir à faire marcher le truc

Pour le

Code :

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

width:100%-170px;

j'avais lu que c'était pas possible mais bizarerment sur IE ça marche...

J'ai fait un premier jet avec des tableaux, ce que je voulais maintenant c'était dissosier complètement fond et forme mais vu les limites de CSS pour une présentation "complexe" je pense que je vais reprendre ma mise en page avec tableaux pour la structure globale de la page (header, footer, menu gauche, etc.). Parce que le overflow:hidden, je l'avais vu, ça ne répond pas du tout à ce que je veux puisque ça cache juste ce qui déborde, donc en gros si ça déborde je perds de l'info...

En tout cas, merci bien pour tes efforts

Mise en page : mélange hauteurs fixes et variables

Dimensionnement en CSS

Discussions similaires

Partager

Partager