Discussion :

[jpguiche]

Bonjour,

Je cherche à faire une présentation (entête, menu-gauche, centre, pied de page) et je veux que la hauteur du menu-gauche et du contenu soient identiques et se mettent à jour automatiquement à la hauteur du plus grand des 2. Mon problème est que la hauteur du menu-gauche ne se met pas automatiquement à la même valeur que celle du contenu. Pourtant tous les 2 on "height: 100%".

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
 
 
#contenu { 
	width: 780px; 
} 
#entete { 
	background: #FFFFFF; 
	border-bottom: 1px solid #999999;
	font-size: x-small ;
	height:60px;
} 
#milieu {
	background: #F000FF;
	}
#menu-gauche {
	float: left;
	width: 170px; 
	height: 100%;
	background: #EFEFEF; 
	border-right: 1px solid #999999;
}
#centre {
	height: 100%; 
	background: #FFFFFF;
} 
#piedpage { 
	clear:both;
	background:#FFFFFF; 
	font-size: x-small ;
	border-top: 1px solid #999999;
}

"menu-gauche" et "centre" sont à l'intérieur de "milieu". La hauteur de "milieu" n'est pas spécifiée car lui aussi se met à la plus grande des 2 hauteurs de "menu-gauche" et de "centre".

Quelqu'un a-t-il une idée ?

Merci.

[Hellwing]

Salut,

Alors j'ai déjà un début de réponse pour toi, dans la mesure où je travaille également sur un site web et je rencontre le même problème.

En fait pour que la propriété "height: 100%;" fonctionne, il faut que le conteneur parent ait également sa propriété height définie (en % ou px)

Dans ton cas, "milieu" doit avoir cette propriété, ainsi que "contenu" (qui contient le tout, si j'ai bien compris)

De même, tu dois définir "height: 100%;" pour les balises html et body dans ton css.

Malheureusement cela ne résout pas tous les problèmes, et pour la suite, je n'ai pas encore trouvé.

[jpguiche]

Merci !

ça fait un moment que je galère sur ce problème et effectivement tu as la solution. A noter qu'il faut remonter jusqu'à html dans la définition des height : si on s'arrête à body ça ne marche pas.

MERCI ENCORE !!