我收到一个包含三个小孩div(内容不同)的容器div，每一个都与最高的一样高。我通过设置容器来显示：table和子div来显示：table-cell等来管理这个。
一切都很好，直到…
我在其中一个孩子div中插入了一个新div，并试图使它的高度：100％ – 所以它将伸展到与父母相同的高度，但这没有工作。
请看我的JSFiddle：http://jsfiddle.net/bkG5A/
任何帮助将不胜感激！
HTML
<div class="container">
<div class="child">
a<br />a<br />a
</div>
<div class="child">
a<br />a<br />a<br />a<br />a<br />a<br />a
</div>
<div class="child">
<div class="content">
a<br />a<br />a
</div>
</div>
</div>
CSS
.container {
display: table;
}
.child {
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
}
.content {
height: 100%;
background-color: blue;
}
解决方法
另一个选项是设置你的子div显示：inline-block;
.content {
display: inline-block;
height: 100%;
width: 100%;
background-color: blue;
}
.container {
display: table;
}
.child {
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
}
.content {
display: inline-block;
height: 100%;
width: 100%;
background-color: blue;
}
<div class="container">
<div class="child">
a
<br />a
<br />a
</div>
<div class="child">
a
<br />a
<br />a
<br />a
<br />a
<br />a
<br />a
</div>
<div class="child">
<div class="content">
a
<br />a
<br />a
</div>
</div>
</div>
