Kéo dài chiều cao div con để điền vào cha mẹ có chiều cao động

Như có thể thấy trong fiddle sau, tôi có hai chữ cái div, được chứa trong một dấu cha mẹ divđã kéo dài để chứa div lớn, mục tiêu của tôi là làm cho các con divđó có chiều cao bằng nhau.

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

Giải pháp là sử dụng display: table-cellđể đưa các phần tử đó vào nội tuyến thay vì sử dụng display: inline-blockhoặc 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>

Làm việc Fiddle

Sử dụng display: flexđể kéo dài divs của bạn :

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

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

JSFIDDLE

Thêm CSS sau:

Đối với div mẹ:

style="display: flex;"

Đối với div con:

style="align-items: stretch;"

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

Tôi nghĩ bạn có thể sử dụng hiển thị dưới dạng lưới:

.parent { display: grid };

Bạn có thể làm điều đó dễ dàng với một chút jQuery

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