IE10 中等高列内的元素内容不是 100%

对于我正在开发的应用程序，我需要等高的列。我选择使用 CSS 将我的列项目设置为表格的样式。这样每根柱子的高度确实是柱子高度中最大的。

请参阅此处的示例：http://jsfiddle.net/roelvd/GXe9m/

现在每个浏览器中每列的高度确实是 100%。这element（在我的例子中是.container）然而，直接在每一列中也应该是 100%。这在 Firefox 和 Chrome 中都可以正常工作；但在 IE10 中没有（很可能是旧的 ID 版本）。

HTML:

<div id="wrapper" class="table">

    <div class="row">
        <div class="column" style="width: 20%">
            <div class="container empty"></div>
        </div>
        <div class="column" style="width: 50%">
            <div class="container">
                <div class="element"><p>Text</p></div>
                <div class="element"><p>And more text. An complete paragraph actually.</p><p>And another one!</p></div>
                <div class="element"><p>And this is even more text.</p></div>
            </div>
        </div>
        <div class="column" style="width: 30%">
            <div class="container">
                <div class="element"><p>And this is even more text.</p></div>
            </div>
        </div>
    </div>

</div>

CSS:

#wrapper {
    width: 600px;
}

.table {
    display: table;
    height: 100%;
}

.row {
    display: table-row;
    height: 100%;
}

.column {
    display: table-cell;
    height: 100%;
    vertical-align: top;
}

.container {
    height: 100%;
    margin: 0;
}

.container.empty {
    background-color: yellow;
}

这似乎是一个错误：使 DIV 填充整个表格单元格

我建议使用display: flex;反而; HTML 更加简洁。

Fiddle: http://jsfiddle.net/GXe9m/2/

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

编辑：也许这不是一个错误：https://code.google.com/p/chromium/issues/detail?id=97959尝试了弹性盒后，似乎子元素仍然无法拉伸到height: 100%;在某些浏览器中，修复它的一种方法是position: relative;对父母和position: absolute;关于孩子：http://jsfiddle.net/GXe9m/3/另一种方法，虽然可能不是最好的方法是使用display: flex;第一列和行上的规则。