Discussion :

[Miksimus]

Bonjour à tous,

J'ai un petit soucis avec le positionnement de mes div :

J'ai trois div principales : tete, corps et pied

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
.tete {
	position:absolue;
        z-index:1; 
	margin-top: -10px;
	margin-left: -10px;
	margin-right: -10px;
	margin-bottom: -14px;
}
.corps {
	position:relative;
	z-index:2; 	
	overflow-y: scroll;
	height: 100%;
}
.pied {
	position:fixed;
	bottom: 0px;
	z-index:2;
	width:100%;
	margin-bottom: -10px;*/
	margin-left: -10px;
	padding-right: -5px;*/
	height : 52px;
	text-align : right;
}

Pas de soucis pour tete.

cependant, corps dépasse toujours en dessous de pied, or je voudrais que ces trois div ne s'empiette pas l'une sur les autres.

Voici un schéma explicatif ci-dessous...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 _____________
|             |   \ tete
|_____________|   /
|             | \
|             | |
|             | |
|             |  > corps
|             | |
|_____________| |
|             | |  \
|-------------| /  |
|             |     > pied
|             |    |
|_____________|    /

On voit que corps passe en dessous de pied.


à noter que la div corps a un acsenseur et doit être extensible en fonction de la taille de la fenêtre du navigateur.

Auriez vous une idée ?

[Miksimus]

Et bien comme quoi, le fait de poster m'a fait trouver la solution...

Pour ceux que ça intéresse :


J'ai enlevé le

Code :

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

height: 100%;

de la div corps, et à la place j'ai mis :

Code :

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

1
2
	top: 52px;
	bottom: 52px;

(52 px : ce qui correspond à la taille en hauteur de mes bannières d'en-tete et de pied de page).

Par ailleurs, j'ai passé la position de relative à absolue.

Code :

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

1
2
3
4
5
6
7
.corps {
	position:absolute;
	z-index:2; 	
	overflow-y: scroll;
	top: 52px;
	bottom: 52px;
}

Voilà, maintenant ça fonctionne bien !