Div高度为100％且溢出：自动输入<= IE10

Question

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

小提琴 。 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%;
}

我想知道为什么它不能在<= IE 10中工作。我知道IE有自己的渲染引擎，但是可以在IE Edge中工作。

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

编辑：

我需要基于表格的布局，因此，我可以固定高度地放置更多行。 带有清单的清单将覆盖可用高度的其余部分。

我认为问题在于具有height: 100%的div height: 100%在表格行中height: 100%无效。 如果我们在开发人员工具中查看“布局”标签，就会看到。 表格行将其高度设置为100％，但其子级将不会达到100%的高度。 有解决方法吗？

Answer 1

添加display: table-cell和overflow: auto到.container因此，它会扩展以填充行并在内容较大时显示滚动条。 您不需要添加overflow: auto ul.list overflow: auto添加，因为它们使ul混乱。 另外，请确保添加width: 100%和height: 100%以便覆盖父对象。

看到它在这里行动。