如何使div与父级相同的高度(显示为table-cell) [英] How to make div same height as parent (displayed as table-cell)
问题描述
我有一个容器div包含三个子div(内容不同) - 每个都和最高的一样高。我管理这个通过设置容器显示:table和子divs显示:table-cell等。
I got a container div containing three child divs (vary in content) - each as tall as the tallest one. I managed this by setting the container to display:table and the child divs to display:table-cell etc.
一切都很好,直到...
Everything worked just fine, until...
我在一个子div中插入了一个新的div,并尝试使它的高度为100%,所以它会伸展到与其父对象相同的高度,但是没有工作
I inserted a new div inside one of the child divs and tried to make it height:100% - so it would stretch to the same height as its parents, but that did not work.
请参阅我的JSFiddle: http://jsfiddle.net/bkG5A /
Please see my 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到 display: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>
这篇关于如何使div与父级相同的高度(显示为table-cell)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!