Des DIVs en height:100% qui... n'en font qu'à leur tête !

Bonjour,

Après un petit tour sur le forum (et même si les questions autour des height:100% sont fréquentes...) je n'ai pas réussi à solutionner mon problème.

Tout d'abord l'url : www.briancanovas.fr/dev/bastidasse/.

Le contenu de ma page :

Une DIV width:100% et height:100% me servant de background. Elle contient notamment un objet Flash.

Je dispose d'une DIV #page (bordure en Noir) en position:absolute, centrée horizontalement, possédant un height:100% et placée sous mon Header. Elle comporte une DIV #MenuTOP (bordure en Orange) et une cellule principale #MainCell (en Bleu Clair) située dessous.

La cellule #MainCell qui dispose aussi d'un height:100% contient, elle, mon menu de droite #MenuRight (bordure en Jaune)en position float:right et aussi avec un height:100%.

La DIV #MenuRight contient enfin une balise IMG "Partenaires" suivie dans le code par une DIV #ContenuMenuRight (bordure en Rouge)destinée à recevoir tous les liens du menu et disposant elle aussi d'un height:100% afin que son background s'étire jusqu'en bas de la page.

Mon code CSS :

html, body {
	margin:0px;
	padding:0px;
	width:100%;
    height:100%;
}

body {
	font-family:"Trebuchet MS", Georgia, Arial;
	font-size:13px;
}

.PNG {behavior: url(iepngfix.htc);}

/* CSS BLOC CONTENEUR (Mise en Page Générale) */
#container {
    width:100%;
    height: 100%;
    voice-family: "\"}\"";
    voice-family: inherit;
}

#FLASHbackground {
	margin:0px;
	padding:0px;
	/*vertical-align: baseline;*/
	font-size:0px;
	position:fixed;
}

html>body #container {
    height: auto;
}

/* CSS HEADER */

#header {
	position:absolute;
	left:50%;
	top:25px;
	margin-left:-427px;
	width:854px;
	height:165px;
	font-size:0px;
}

/* CSS MENU */
#menuTOP {
	width:838px;
	padding-top:5px;
	margin-left:8px;
	height:23px;
	background-image:url(images/fondMenuTop.gif);
	background-position:top	;
	background-repeat:repeat-x;
	border:1px solid #FF6600;
}

#menuTOP a{
	margin-left:10px;
	font-size:13px;
	text-decoration:none;
	vertical-align:middle;
	color:#3e6d01;
}

#menuTOP a:hover{
	color:#FFFFFF;
}

/* CSS MA PAGE - Elle débute sous le Header et comprend : le MenuTop, la MainCELL(fond rouge) qui comprend le MenuRight(Nos Partenaires)*/

#page {
	position:absolute;
	left:50%;
	top:190px;
	margin-left:-427px;
	margin-bottom:30px;
	width:854px;
	height:100%;
	/* Ma bordure ombrée au format PNG - ANCIEN APPEL DE L'IMAGE SANS LE HACK IE6 */
	background:url(images/fondPage.png) repeat-y left top;
	border:1px solid #000000;
}

/* Ma bordure ombrée au format PNG - HACK IE6 BACKGROUND PNG TRANSPARENT AVEC REPEAT-Y */
* html #page {
	background: none; /*Remove background*/
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fondPage.png',sizingMethod='scale');
}

/* DIV destinée à recevoir tous les textes, photos, etc... de chaque page et qui comprend mon MenuRight en position float:right */
#MainCELL {
	width:838px;
	height:100%;
	margin-left:8px;
	background-color: #0099CC;
}

/* Mon MenuRight - Il comprend une partie supérieur (Balise IMG) avec dessous une DIV #ContenuMenuRight qui doit contenir tous les liens du menu */
#MenuRight {
	float:right;
	width:149px;
	height:100%;
	font-size:0px;
	border:1px solid #FFFF00;
}

#ContenuMenuRight {
	/* ANCIEN APPEL DE L'IMAGE SANS LE HACK IE6 */
	background:url(images/fondMenuRight.png) repeat-y left top;
	height:100%;
	font-size:12px;
	border:1px solid #CC0000;
}

* html #ContenuMenuRight {
	background: none; /*Remove background*/
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fondMenuRight.png',sizingMethod='scale');
}

/* CSS FOOTER */
#footer {
	width:838px;
    position: absolute;
	left:50%;
	bottom:-190px;
	margin-left:-419px;
	background-color:#7fe000;
	color:#3e6d01;
	text-align:center;
	vertical-align:middle;
	font-size:10px;
}

Ce qui se produit :

Le height:100% de ma DIV #MainCell dépasse verticalement de mon Footer d'un espace qui semble être équivalent à la hauteur de mon #MenuTop.

Le height:100% de ma DIV #MenuRight se comporte pareil.

Le height:100% de ma DIV #ContenuMenuRight dépasse verticalement de mon Footer d'un espace qui semble être équivalent à la hauteur de mon #MenuTop + la hauteur de ma balise IMG "Partenaires".

Après de nombreux essais, je n'arrive toujours pas à trouver une combinaison satisfaisante dans la structure de mon code afin d'obtenir l'effet souhaité : que tous mes éléments s'étirent sur l'ensemble de la page lorsque je le leur demande, mais que rien ne dépasse de mon Footer.

Je remercie d'avance toutes les âmes charitables qui pourront me donner un coup de pouce !
Merci pour elles !!!
Modifié par Brain (19 Mar 2008 - 12:50)