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

IE10中一个绝对定位的div没有填满它的父级高度（在最新的Chrome和Firefox中工作正常）

在下面的代码中，“高度百分比”类是问题所在。它填充宽度，但不填充高度

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

用于视觉效果的代码笔：

HTML:

---

对于这个问题，您可以使用“display:flex”CSS，它将动态地分布高度

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

.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;
}

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