IE10中的HTML布局涉及百分比宽度和高度

Question

IE10 中的绝对定位 div 未填充其父级高度（在最新的 Chrome 和 Firefox 中正常工作）。

在下面的代码中，“percent-height”类是问题所在。它可以填充宽度，但不能填充高度。

如果我设置像素高度（在单元格 3 中），这就是我知道“高度”百分比是问题的方式，而不是宽度。我需要一个百分比高度，因为这将是响应式的。

用于视觉效果的 Codepen：http://codepen.io/anon/pen/eNexOg

HTML：

<div class="table">
    <div class="cell">
       <img src="http://placehold.it/200x200" alt="" />
    </div>
    <div class="cell">
        <div class="percent-height"></div>
    </div>
    <div class="cell">
        <div class="px-height"></div>
    </div>
    <div class="cell">
    </div>
</div>

CSS：

.table {
    display: table;
    width: 100%;
    border-spacing: 5px;
}

.cell {
    display: table-cell;
    width: 25%;
    position: relative;
    background-color: grey;
}

.percent-height {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: green;
}

.px-height {
    position: absolute;
    width: 100%;
    height: 200px;
    top: 0;
    left: 0;
    background-color: red;
}

Answer 1

对于这个问题，您可以使用“display:flex” CSS 动态分配高度。

.table{
   display: -ms-flex;
   display: -webkit-flex;
   display: flex;
}
.cell {
   -ms-flex: 1;
   -webkit-flex: 1;
   flex: 1;
}