Hauteur des div enfant à 100%

Salut,

J'ai un petit soucis pour mettre la hauteur à 100% de deux calques enfant dans un parent.

Le contenu de mes div enfant est rempli dynamiquement. Je ne sais donc jamais lequel des 2 enfants sera le plus grand. Mais j'aimerais que le plus petit se mettent toujours à 100% pour avoir la taille de l'enfant le plus grand. Donc à 100% du parent.

la strucutre :

<div id="parent">
  <div id="enfant1"> contenu de longueur variable </div>
  <div id="enfant2"> contenu de longueur variable </div>
</div>

Un petit schéma :
+-----------------------------------------+
| |
| +----------------+ +----------------+ |
| | contenu | | contenu plus | |
| | de longueur | | court | |
| | variable | +----------------+|
| +----------------+ |
+-----------------------------------------+


HAHA, j'aime bien mon schéma Enfin bref, ici mon enfant 2 est trop court, j'aimerais qu'il ait une hauteur de 100% par rapport à son parent

NB : J'ai déjà essayé height:100% sur mes enfants ça ne fonctionne pas.

Des idées. Merci cordialement d'avances.

Bon week end à vous autres geeks

Ah mince ! mon schéma il n'est plus tout compréhensible quand le message est posté. SNIF... Je m'étais donnée beaucoup de peine pour le faire

Salut,

voir l'astuce : Comment faire des "colonnes" de même hauteur.

Au passage lire Quelle est la différence entre un DIV et un «calque».

Compatible tous navigateurs sauf les vieilles versions d'IE (6 et 7):

#parent {
  display: table;
}
#parent > div {
  display: table-cell;
}

Modifié par Florent V. (13 Feb 2010 - 16:43)

Florent V. a écrit :
Compatible tous navigateurs sauf les vieilles versions d'IE (6 et 7):

#parent {
  display: table;
}
#parent > div {
  display: table-cell;
}

#parent > div

C'est la première fois que je vois ce type de syntaxe ! Et je n'arrive pas vraiment à le faire fonctionner .

J'ai :
.wrapper-top > div
{
display:table-cell
}

Il s'agit du sélecteur enfant (qui ne fonctionne pas avec IE6) : il cible les éléments descendants de premier niveau (ou enfants) et est donc inutile si, en reprenant l'exemple de Florent, les DIV "colonnes" ne contiennent pas d'éléments DIV.

Pour tester :

#parent { 
  display: table;
} 
#parent > div { 
  display: table-cell; 
  border: 1px solid #ccc;
}

<div id="parent">
	<div>
		<p>Du contenu.</p>
		<p>Du contenu.</p>
	</div>
	<div>
		<p>Du contenu.</p>
		<p>Du contenu.</p>
		<p>Du contenu.</p>
		<p>Du contenu.</p>
	</div>
</div>

Modifié par Heyoan (13 Feb 2010 - 21:22)