问题
I would like to have a child element under a div with "display: table-cell" take up the whole height of the parent div.
Does anybody have any idea why the following snippet works like a charm in Chrome and FF, and it breaks under IE, including 10?
HTML:
<body>
<div class="table">
<div class="table-cell">
this normally has 100%
</div>
<div class="table-cell">
<div>
this should get height 100% too
</div>
</div>
</div>
</body>
CSS:
.table {
display: table;
height: 100%;
}
.table > div:first-child {
height: 300px;
background: #f00;
}
.table-cell {
display: table-cell;
vertical-align: top;
height: 100%;
}
.table-cell > div {
height: 100%;
background: #0c0;
}
http://jsfiddle.net/5zu8unzz/
Thanks.
回答1:
Same problem in IE 11 :-(
Obviously, the behavior of height with table-cells is not part of the spec.
Just found this thread: IE display: table-cell child ignores height: 100%
Really sucks!!!
来源：https://stackoverflow.com/questions/25285595/height-100-percent-under-display-table-cell-in-ie