显示下的高度100％:IE中的表格单元 [英] Height 100 percent under display: table-cell in IE
本文介绍了显示下的高度100％:IE中的表格单元的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望在一个带有"display:table-cell"的div下有一个子元素，该元素占父div的整个高度.
I would like to have a child element under a div with "display: table-cell" take up the whole height of the parent div.
有人知道为什么以下代码段在Chrome和FF中像超级按钮一样工作，却在IE之下无法正常显示，包括10吗?
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;
}
谢谢.
推荐答案
IE 11中存在相同问题:-(
Same problem in IE 11 :-(
很明显，表格单元格的高度行为不是规范的一部分.
Obviously, the behavior of height with table-cells is not part of the spec.
刚刚找到了这个线程: IE显示:表格单元格子级忽略高度:100％
Just found this thread: IE display: table-cell child ignores height: 100%
真的很烂！
这篇关于显示下的高度100％:IE中的表格单元的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
