html - Internet Explorer 中的 100% 高度问题

Question

我有一个应用程序，其中我的布局是动态的。它可以像一张 table (1X1、2X2 或 3X3)。 在 Firefox 和 Chrome 中，我的 div ViewPortContent 以正确的方式调整大小。但在 IE 中没有任何反应。 ViewPortContent 没有调整大小以填充剩余内容，就像在 Firefox 或 Chrome 中一样。100% 高度属性不能正常工作吗？你能帮忙吗？

下面是我的 JsFiddle(在 IE 和 Mozilla 中试试)

.dhDivTable{
height:500px;
width:100%;
background:black;
display: table;
table-layout:fixed;
}
.dhDivRow {
display: table-row;
}
.dhViewPortWrapper {
display: table-cell;
padding: 3px;  }

.dhViewPortContent{
 border: solid 1px violet;
 height:100%;
 width:100%;
 display: table;
 position:relative;
 color:white;
}

http://jsfiddle.net/qqTtQ/1/

Answer 1

Palash 在一般情况下是正确的，但您的情况稍微复杂一些。需要在.dhViewPortWrapper类中添加一个height指令来导出高度，但是你设置的高度必须是分配给当前行的表格高度的比例。您将需要动态分配它。因此，如果您知道将有两行，您可以将 dhViewPortWrapper div 定义为:

<div class="dhViewPortWrapper" style="height: 50%;">

如果您需要行具有动态高度，则需要弄清楚如何计算高度并应用它们。