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

Posted 2023-03-06

【中文标题】IE10中的HTML布局涉及百分比宽度和高度

【英文标题】：HTML layout in IE10 involving percentage width and height

【发布时间】：2015-09-11 23:50:30

【问题描述】：

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"  />
    </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;

【参考方案1】：

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

.table
   display: -ms-flex;
   display: -webkit-flex;
   display: flex;

.cell 
   -ms-flex: 1;
   -webkit-flex: 1;
   flex: 1;