28172 sujets

CSS et mise en forme, CSS3

Taille auto div imbriquer 100%

Bonjour, j'ai une div "Maman" qui n'a pas de "height", donc qui s'adapte à la taille du contenu, se qui est le cas
Hors j'aimerai qu'une div "enfant" prenne la même hauteur que sa Maman, donc avec un height: 100%. Si je fixe pour tester une taille a la maman, aucun soucis le 100% sur l'enfant s'applique, mais si j'enleve la taille fixe, la maman a la taille mais son enfant crois qu'elle fait 0px !

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
    </head>
    <body>
		<div id="Maman">
			
			<div id="Enfant">
				<div id="PetitEnfantGauche"></div>
				<div id="PetitEnfantMilieu">
					<p>blablabalbal</p>
					<p>blablabalbal</p>
					<p>blablabalbal</p>
					<p>blablabalbal</p>
				</div>
				<div id="PetitEnfantDroite"></div>
			</div>
		</div>
    </body>
</html>


CSS
#Maman
{
	float: left;
	width: 177px;
	height: 300px;
		/* Si on enleve cette ligne pour que la taille sois automatique:
		 * cette div et la div "PetitEnfantMilieu" ont une bonne taille
		 * mais la div Enfant ne prend pas la taille 100%, donc les div sur le coté ont pas de taille !
		 * En gros si tpeut trouver le moyens de corriger la height de la Enfant c gagner !
		 */
	background-color: RED;
}

	#Enfant
	{
		width: 177px;
		height: 100%;
		background-color: GREEN;
	}

		#PetitEnfantGauche
		{
			float: left;
			width: 6px;
			height: 100%;
			background-color: PURPLE;
		}
		
		#PetitEnfantMilieu
		{
			float: left;
			width: 165px;
			height: 100%;
			background-color: BROWN;
		}
		
		#PetitEnfantDroite
		{
			float: right;
			width: 6px;
			height: 100%;
			background-color: YELLOW;
		}



Que faire ? Smiley fache
Les hauteurs en pourcentages fonctionnent ainsi: ça prend en compte la hauteur du parent uniquement si elle est spécifiée explicitement. Tu ne vas donc pas pouvoir utiliser un height:100% pour ça.

Il faut voir si ça peut marcher dans ton cas de figure, mais je ferais sans doute quelque chose comme ça:
#maman {
  position: relative;
  height: auto;
}
#enfant {
  position: absolute;
  top: 0; bottom: 0; /* et voilà, magie */
}

Ceci dit, si je reprends ton exemple il y a une solution encore plus simple: utiliser des bordures.
Et s'il s'agit de décorations un peu plus recherchées que ce que ton exemple laisse supposer, on peut aussi jouer sur des images de fond multiples (avec les background multiples en CSS3, ou en imbriquant deux ou trois DIV autrement). Le positionnement absolu pour des petits éléments de décoration c'est bien, mais c'est comme les antibiotiques: c'est pas automatique.
Modifié par fvsch (07 Mar 2011 - 01:15)
Merci j'ai résolu mon problème comme ca et en ajustant avec des margin et tout et tout ><

N'empeche que sa reste fastidieu le placement css je trouve :-\
AlgaboW a écrit :
N'empeche que sa reste fastidieu le placement css je trouve :-\

C'est pas moi qui ai écrit la spec. Smiley lol

Sinon il y a des solutions qui peuvent être sympa en CSS 2.1 (display:table-cell) ou en CSS 3 (display:box), mais avec un support partiel dans les navigateurs actuels.

AlgaboW a écrit :
Merci j'ai résolu mon problème comme ca et en ajustant avec des margin et tout et tout

Je vois pas trop le besoin d'ajuster avec des margin et tout et tout.
Modifié par fvsch (07 Mar 2011 - 16:49)
Sujet clos
Aller à