Bloc qui prend la hauteur du bloc parent

bonsoir à tous,

j'ai ça en html:

	<div id="conteneurmid">
		<div id="gauche">
			<div id="midtop"></div>
			<div id="midmid">
				<div id="titremid">blabla titre ??</div>
				<div id="contenumid">bla</div>
			</div>
<div id="midbas"></div>
		</div>
		<div id="droit">
			<div id="midtopmenu"></div>
			<div id="midmidmenu">bla</div>
			<div id="midbasmenu"></div>
		</div>
	</div>

et ça en css

#midtop{
background:url(img/midtop.png) no-repeat left bottom;
height:15px;
}
#midmid{
background:url(img/midmid.png) repeat-y;
min-height:100px;
height:100%;
}
#midbas{
background:url(img/midbas.png) no-repeat left top;
height:15px;
}

#midtopmenu{
background:url(img/midtopmenu.png) no-repeat right bottom;
height:15px;
}
#midmidmenu{
background:url(img/midmidmenu.png) repeat-y;
min-height:100px;
height:100%;
}
#midbasmenu{
background:url(img/midbasmenu.png) no-repeat right top;
height:15px;
}

#conteneurmid,#conteneurbas{
clear:both;
}


#gauche{
float:left;
width:595px;
height:100%;
}
#droit{
float:right;
width:195px;
height:100%;
}

#titremid{
padding:5px 15px;
margin:0;
}
#contenumid{
margin:0;
padding:20px;
}

mon souci est qu'en fait mes conteneurs droit et gauche ne font pas la même taille . ça fait beaucoup de conteneurs dans d'autres conteneurs, mais bon, avec mes images de fond qui ne se répètent pas en top et bottom, et les images de milieu qui se répètent c'est un peu galère.

si quelqu'un a une idée merci ça serait sympa

Le height: 100% ne fonctionne que si la hauteur du bloc parent est déterminée (en pixels ou em ou en pourcentage de la hauteur de son propre parent... hauteur qui doit elle-même être déterminée).

Pour un bloc unique, on fait souvent quelque chose comme ça :

html, body {
	margin: 0; padding: 0;
	height: 100%;
}
div#page {
	min-height: 100%;
}

Mais je ne suis pas sûr que cela corresponde à ton besoin (qui me semble peu clair, juste au vu du code...).

Si tu veux donner l'impression d'avoir deux « colonnes » de même hauteur quelle que soit la hauteur du contenu de chaque « colonne », je te conseille la technique dite des colonnes factices.

PROTIP : faire une recherche google (ou autre) sur « colonnes factices ».
Modifié par mpop (06 Dec 2006 - 13:04)

merci, c'est ce que j'ai finalement fait. Mon fond de contenu n'est plus séparé en 2 colonnes de fond, donc plus de souci pour l'instant. Merci pour ta réaction. Bonne journée

Bonjour,

mpop a écrit :
Pour un bloc unique, on fait souvent quelque chose comme ça :

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

Il me semble que ce code pose problème dans le cas où la hauteur du contenu dépasse la hauteur de la fenêtre, non ?
Modifié par Eldebaran (05 Dec 2006 - 10:40)

Eldebaran a écrit :
Bonjour,Il me semble que ce code pose problème dans le cas où la hauteur du contenu dépasse la hauteur de la fenêtre, non ?

Oui, effectivement, faute de frappe de ma part. Il faut utiliser un min-height: 100% pour le conteneur global (plus commentaires conditionnels et height: 100% pour IE6 et précédents).