Occuper tout la hauteur de son parent

Hello tout le monde,


J'ai un petit. J'ai un div imbriqué dans un autre. Je souhaiteré qu'il occupe toute la hauteur. J'ai utilisé height:100% mais sans succès. La hauteur déborde.

Une capture pour vous montrer mon soucis :
http://j.imagehost.org/0793/Capture_3.png
Mon cadre bleu dépasse celui de son parent rouge.
Les cadres rouge et bleu sont des div imbriqués. Le cadre noir est un <td> d'un tableau.

Mon code dépouillé que j'espère suffisamment claire :

<table id="mainTab" width="100%" border="0">
	<tr>
		<td id="list" width="230px" style="vertical-align:top;padding-top:20px;padding:0px;margin:0px;">
			<?php echo $this->render('monitor/partial/list.phtml')?>
		</td >
		<td style="padding:0px;margin:0px;color:black;border:3px solid black;">

			<!-- cadre rouge qui englobe tout mes div -->
			<div id="mainRight" style="border:1px solid red;height:100%;background-image:url('/images/monitor/server/bground_tableau_admin.jpg');background-position:bottom left;background-repeat: repeat-x;">			

				<!-- cadre au fond rouge -->
				<div id="headerTab" 	style=" background-color:#e75c59;">
					bla bla bla bla				
				</div>
				
				<!-- cadre header wrapper englobant -->
				<div style="position:relative;border:1px solid green;height:26px;font-weight:bold;vertical-align:middle;">
					
					<!--  colonne 1 -->
					<div id="headerTitleGraph" 	style="float:left;border:1px solid yellow;height:100%;vertical-align:middle;">
						cadre 1
					</div>
					
					<!--  colonne 2 -->
					<div id="headerTitleLoadProcessor" style="float:right;width:25%;height:100%;vertical-align:middle;" >
						cadre 2
					</div>
					
					<!--  colonne Separateur -->
					<div style="float:right;width:5px;padding-left:2px;border:1px solid red;height:100%"></div>
				</div>
				
				<!--  cadre bleu qui pose problème -->
				<div style="border:2px solid blue;height:100%;clear:both;"></div>

			</div>
		</td>
	</tr>
</table>

Modifié par alexx (06 Apr 2010 - 22:53)

Bonsoir,

Je pense que tu trouveras ton bonheur avec ce tutoriel.

Si tu cherches a faire des colonnes de même hauteur mais sans qu'elles soient à 100% tu as la solution des colonnes factices.
Avec comme exemple ce gabarit.

Par contre l'utilisation de tableaux pour ta mise en page ainsi que les styles dans le body sont a proscrire.
Modifié par MaxWeb (06 Apr 2010 - 22:24)

Bonsoir,

Je veux pour le moment ne pas faire de colonne mais juste que mon DIV bleue ne déborde, qu'il tienne dans le Div père rouge qui contient tout plein de div.

Je vais regardé un peu plus en détail ton tuto.

Mon souci vient peut etre d'une histoire de position.
Dans ton tuto, on peux voire :

a écrit :
L'utilisation de position: relative; sur #global définit les frontières de l'élément #global comme point de repère pour le positionnement de ses enfants. La position "bottom: 0px, left: 10px" est maintenant le coin inférieur gauche de #global, au lieu de celui de body.

Je l'ai donc appliqué sur le cadre rouge dans mon cas. Je vais essayer de creuser. Sinon dans le pire des cas, je ne mettrais pas 100% comme hauteur et puis c'est tout. Je mettrais une hauteur plus petite