Étirer la hauteur du div enfant pour remplir le div parent qui a une hauteur dynamique

Question

Comme on peut le voir dans le tableau suivant, j'ai deux fichiers de type div contenues dans un parent div qui se sont étendus pour contenir la grosse div, mon but est de faire en sorte que ces enfants div de même hauteur.

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

Answer 1

Utilisez display: flex pour étirer votre div s :

div#container {
    padding:20px;
    background:#F1F1F1;
    display: flex;
}

.content {
    width:150px;
    background:#ddd;
    padding:10px;
    margin-left: 10px;
}

JSFIDDLE

Answer 2

La solution consiste à utiliser display: table-cell pour mettre ces éléments en ligne au lieu d'utiliser display: inline-block o 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;
}

<div id="container">
  <div class="content">
    <h1>Title 1</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
      <br>Sample Text. Sample Text. Sample Text.
      <br>Sample Text.
      <br>
    </div>
  </div>
  <div class="content">
    <h1>Title 2</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div>
  </div>
</div>

Violon de travail

Answer 3

Ajoutez le CSS suivant :

Pour la division parent :

style="display: flex;"

Pour la div. enfant :

style="align-items: stretch;"

Answer 4

https://www.youtube.com/watch?v=jV8B24rSN5o

Je pense que vous pouvez utiliser l'affichage comme grille :

.parent { display: grid };

Answer 5

Vous pouvez le faire facilement avec un peu de jQuery.

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