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%以便覆蓋父對象。

看到它在這里行動。