Question

我在处理仅在＆lt; = IE 10中出现的奇怪问题时遇到了麻烦。其他浏览器按预期工作。基本上，如果在＆lt; = IE 10 中使用ul.list，则100%不会扩展为overflow:auto。

Fiddle。 JS Fiddle并不适用于旧版本的IE。我认为它也不会在IE 10中运行。

HTML：

<div id="container">
    <div class="table">
        <div class="row">
            <div class="container">
                <ul class="list">
                    <li>Hello!</li>
                    <li>If I understand what you're trying to do correctly, then I don't think this is possible with CSS while keeping the children absolutely positioned.</li>
                    <li>The div needs its parent to have a defined height before 100% height works, however that's not an option for you as you've already stated that this is all dynamic content. No problem. We just need the jQuery to push the calculated height to the div after the browser has already rendered it. Simple enough, right?</li>
                    <li>If I understand what you're trying to do correctly, then I don't think this is possible with CSS while keeping the children absolutely positioned.</li>
                    <li>And once we get the truth from the TD, we tell the div that the size its parent has reported is the size that it needs to be, and give it back its contenthas reported is the size that it needs to be, and give it back its content.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS：

#container {
    width: 300px;
    height: 350px;
}
.table {
    width:100%;
    height: 100%;
    display: table;
}
.row {
    width: 100%;
    height: 100%;
    background: green;
    display: table-row;
}
.container {
    position: relative;
    width: 100%;
    height: 100%;
}
.list {
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

我想知道为什么它不能在＆lt; = IE 10中运行。我知道IE有自己的渲染引擎，但它可以在IE Edge中运行。

我需要将列表定位为绝对，因为我们无法在表格行上设置最大高度。另外，我无法设置max-height: 100%，因为表格行总是适合其内容。

编辑：

我需要基于表格的布局，所以我可以更多行固定高度。带有列表的那个将覆盖剩余的高度。

我认为问题是表格行中带有height: 100%的div不起作用。如果我们查看开发人员工具中的布局选项卡，我们可以看到。表格行将其高度设置为100％，但其子项不会达到100%的高度。有解决方法吗？

Answer 1

将display: table-cell和overflow: auto添加到.container，这样，它会展开以填充行，并在内容较大时显示滚动条。您无需将overflow: auto添加到ul.list，因为它们会让ul感到困惑。此外，请务必添加width: 100%和height: 100%，以便它涵盖父级。

在行动here中查看。

Div高度为100％且溢出：auto in＆lt; = IE10

编辑：

1 个答案: