拉伸子div高度以填充具有動態高度的父母

Question

由於在以下小提琴中可以看到，我有兩個div s，包含在父親div中，這些父母已包含大div，我的目標是使這些小孩div s高度相等。

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

Answer 1

的解決方案是使用display: table-cell使這些元件內聯，而不是使用display: inline-block或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>

Working Fiddle

Answer 2

使用display: flex伸展你的div S：

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

JSFIDDLE

Answer 3

你可以用一點jQuery的

的

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

Answer 4

做很容易添加以下CSS：

父DIV：

style="display: flex;" 

對於孩子的div：

style="align-items: stretch;"