Question

当我在表格单元格（＃cell-2）中放置一个绝对定位的div（#window）时，＃window在IE9和10中不显示。但它在其他浏览器中工作正常。我在这篇文章的末尾放了一个小提琴来证明这一点。

这是html：

<body>
    <div id="table">
        <div id="cell-1"></div>
        <div id="cell-2">
            <div id="window"></div>
        </div>
    </div>
</body>

这就是CSS：

html, body{
    height:100%;
}

#table{
    display:table;
    width:100%;
    height:100%;
    background-color:blue;
}

#cell-1{
    display:table-cell;
    height: 100%;
    width: 210px;
    background-color:black;
}

#cell-2{
    display:table-cell;
    position:relative;
    height:100%;
    background-color:green;
}

#window{
    position:absolute;
    overflow-y:scroll;
    overflow-x:hidden;
    background-color:yellow;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

You can find the fiddle here。您会注意到屏幕右侧部分正确显示非IE浏览器中的黄色div。但是在使用IE9和IE10时显示绿色div。

值得注意的是，＃window是一个动态生成的模态窗口，应该覆盖＃cell-2的内容，不一定是空的。需要溢出。

问题似乎与IE似乎忽略高度有关：100％;因为身高：100px;例如，将按预期显示。

任何帮助将不胜感激。感谢

Answer 1

删除位置：绝对来自#window类并尝试，它有效!!

#window{
    overflow-y:scroll;
    overflow-x:hidden;
    background-color:yellow;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

Answer 2

尝试将填充设置为0和高度：auto;在#window。

#window{
position:absolute;
overflow-y:scroll;
overflow-x:hidden;
background-color:yellow;
top:0;
left:0;
width:100%;
height:auto;
padding:0;  <-----
}

IE9-10高度：100％不起作用

2 个答案: