Slt,

Avant de venir faire se post, j'ai cherché vainement une réponse a mon problème en faisant des recherches sur le net ou dans le forum.
Il y avait effectivement pas mal de sujet, mais dans aucun d'eux je n'ai trouver d'explication qui me convienne.
je sais que c'est un sujet assez courant. alors peut êtres que quelqu'un pourra me rediriger vers un lien que je n'aurais pas vue ou tout simplement me donner une explication.

MON PROBLÈME

Je voudrais donner une valeur 100% a la hauteur d'un "DIV" qui est imbriqué dans un autre "DIV".

Pour mieux comprendre la description que je vais vous faire, j'ai réalisé un petit schéma qui se trouve en bas de mon post.

I - J'ai créer un conteneur principal nommé "01", qui as comme valeur pour la largeur 757px et aucune valeur pour la hauteur

II- a l'intérieur de celui-ci, j'ai placé 2 balises DIV nommé "02" et "03" qui ont comme valeur en hauteur, une taille défini et qui n'ont aucune valeur en la largeur.

III- Une autre balise DIV nommé "04" viens se placer a la suite des DIV "02" et "03" avec aucune valeur pour la hauteur et pour la largeur.
dans ce DIV sera placé tous le contenu du site (texte) donc la hauteur s'adaptera au contenu.

V- ensuite j'ajoute un autre DIV nommé "05" qui vas venir se placer par dessus les DIV "02" "03" et "04" dans lequel je vais affiché le menu de mon site.
Le problème comme la
je voudrais que la hauteur de se DIV s'adapte a la hauteur de conteneur principal "01" ????

Shéma
http://www.pioutesdemarseille.com/css.png

Voici le code HTML

<div id="01">    
    <div id="05"></div>
    <div id="02"></div>    
    <div id="03"></div>
    <div id="04"></div>
</div>


Voici les CSS que j'ai créer

#01{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #FFFFFF;
	padding: 11px;
	border: 1px solid #a4a1a1;
	width: 757px;
	margin: auto;
	height: 460px;
}

#02{
	height: 124px;
	background-color: #e37d1e;
	background-image: url(top.jpg);
	background-repeat: no-repeat;
	padding-left: 278px;
}
#03{
	background-color: #d4d2bb;
	height: 159px;
	margin-top: 10px;
	background-image: url(midle.jpg);
	background-position: right;
	background-repeat: no-repeat;
	padding-left: 278px;
}
#04{
	background-color: #f6f6ee;
	margin-top: 10px;
	padding-left: 278px;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-right: 10px;
}
#05{
	background-color: #FFFFFF;
	width: 226px;
	margin-left: 33px;
	position: absolute;
	padding-top: 10px;
	padding-bottom: 10px;
	height: 450px;
	background-image: url(fond_menu.png);
	background-repeat: repeat-x;
}

Modifié par Kweb (29 Aug 2007 - 10:41)