css - 拉伸子 div 高度以填充具有动态高度的父级

Question

从下面的小提琴中可以看出，我有两个divs，包含在一个已拉伸以包含大 div 的父div级中，我的目标是使这些子div级的高度相等。

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

Answer 1

用来display: flex拉伸你div的 s：

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

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

JSFIDDLE

Answer 2

解决方案是使用display: table-cell将这些元素内联而不是使用display: inline-blockor 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>

工作小提琴

Answer 3

添加以下 CSS：

对于父 div：

style="display: flex;"

对于子 div：

style="align-items: stretch;"

Answer 4

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

我认为您可以将显示用作网格：

.parent { display: grid };

Answer 5

你可以用一点 jQuery 轻松完成

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