文章/答案/技术大牛

发布

社区首页 >问答首页 >IE9-10高度: 100%不起作用

问IE9-10高度: 100%不起作用
EN

Stack Overflow用户

提问于 2015-01-08 16:23:34

回答 2查看 1.6K关注 0票数 1

当我在表格单元格div (#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%;
}

你可以在这里找到小提琴。您会注意到，屏幕的右边部分在非IE浏览器中正确显示黄色div。但是在使用IE9和IE10时显示绿色div。

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

这个问题似乎与IE似乎忽略高度:100%有关；因为高度:100 as；例如，将按预期显示。

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

css

html

internet-explorer

回答 2

Stack Overflow用户

发布于 2015-01-08 16:36:22

删除位置:绝对从#窗口类，并尝试，它的工作！！

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

票数 2

Stack Overflow用户

发布于 2015-01-08 16:40:26

尝试将填充设置为0和高度: auto；在#窗口中。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27844813

复制

相似问题

问IE9-10高度: 100%不起作用
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE9-10高度: 100%不起作用EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE9-10高度: 100%不起作用
EN