我收到一个包含三个小孩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>
