pb avec div au centre [Résolu]

dominos · 20/01/2011, 16h21

bonjour,

comme le montre l'image ci-dessous, je cherche à placer 3 div
sur le 100% de la page, le but est de parvenir à faire s'adapter la taille de la div du centre celle-ci possèdant un overflow: auto

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
div.entete {
	height: 70px;
	width: 100%;
}
#pied {
	width: 100%;
	height: 70px;
	bottom: 0px;
	position: absolute;
}
#content {
	height: auto;
	overflow: auto;
	position: inherit;
}

merci d'avance pour votre aide

ornitho13 · 20/01/2011, 16h58

salut,

Il suffit de mettre en position absolute ton "content". Voici un exemple:

Code html :

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

1
2
3
4
 
<div class="entete"></div>
<div id="content"></div>
<div id="pied"></div>

Code css :

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
 
body{
	margin:0;
}
div.entete {
	height: 70px;
	width: 100%;
	background-color:#efe;
}
#pied {
	width: 100%;
	height: 70px;
	bottom: 0px;
	position: absolute;
	background-color:#ccc;
}
#content {
 
	width:100%;
	overflow: auto;
	background-color:#900;
	position:absolute;
	top:70px; /*taille de 'entete'*/
	bottom:70px;/*taille de 'pied'*/
}

dominos · 20/01/2011, 17h33

merci beaucoup pour l'explication, tout ça me semble maintenant plus clair, je suis en train de désinstaller ie9beta qui semble non compatible, pour les autres navigateurs c'est bon.

dominos · 20/01/2011, 20h27

Citation:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

20/01/2011, 17h33	#3
dominos Membre régulier Inscription : février 2009 Messages : 197 Détails du profil Informations forums : Inscription : février 2009 Messages : 197 Points : 71 Points : 71	merci beaucoup pour l'explication, tout ça me semble maintenant plus clair, je suis en train de désinstaller ie9beta qui semble non compatible, pour les autres navigateurs c'est bon.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email