我希望在 div 下有一个带有“display: table-cell”的子元素,占据父 div 的整个高度。
有谁知道为什么下面的代码片段在 Chrome 和 FF 中工作得很好,但在 IE(包括 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/ http://jsfiddle.net/5zu8unzz/
Thanks.
IE 11 中存在同样的问题:-(
显然,表格单元格的高度行为不是规范的一部分。
刚刚发现这个线程:IE显示:表格单元格子忽略高度:100% https://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100
真的很烂!!!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)