Question

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

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

如果我设置像素高度（在单元格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

对于此问题您可以使用＆＃34; display：flex＆＃34; CSS将动态分配高度。

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

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

1 个答案: