Étirer la hauteur de div enfant pour remplir le parent qui a une hauteur dynamic

Comme on peut le voir dans le violon suivant, j’ai deux div , contenues dans un div parent qui ont été étendues pour contenir le grand div, mon but est de rendre ces div s égaux en taille.

http://fiddle.jshell.net/y9bM4/

La solution consiste à utiliser display: table-cell pour mettre ces éléments en ligne au lieu d’utiliser display: inline-block ou float: left .

 div#container { padding: 20px; background: #F1F1F1 } .content { width: 150px; background: #ddd; padding: 10px; display: table-cell; vertical-align: top; } .text { font-family: 12px Tahoma, Geneva, sans-serif; color: #555; } 
 

Title 1

Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
Sample Text. Sample Text. Sample Text.
Sample Text.

Title 2

Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.

Utilisez display: flex pour étirer vos div :

 div#container { padding:20px; background:#F1F1F1; display: flex; } .content { width:150px; background:#ddd; padding:10px; margin-left: 10px; } 

JSFIDDLE

Ajoutez le CSS suivant:

Pour le div parent:

 style="display: flex;" 

Pour l’enfant div:

 style="align-items: stretch;" 

Vous pouvez le faire facilement avec un peu de jQuery

 $(document).ready(function(){ var parentHeight = $("#parentDiv").parent().height(); $("#childDiv").height(parentHeight); });