html - 等高列内 IE10 中元素的含量不是 100%

Question

对于我正在处理的应用程序，我需要等高的列。我选择使用 CSS 将我的列元素设置为表格的样式。这样每列的高度确实是列高中的最大值。

请看这里的例子: http://jsfiddle.net/roelvd/GXe9m/

现在每个浏览器中每个列的高度确实是 100%。 元素(在我的例子中是 .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;
}

Answer 1

这似乎是一个错误:Make a DIV fill an entire table cell

我建议使用 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在尝试了 flexbox 之后，子元素似乎仍然不能拉伸(stretch)到 height: 100%; 在一些浏览器中，一种修复它的方法是 position: relative; on the parent and position: absolute; 在 child 上:http://jsfiddle.net/GXe9m/3/另一种方法(虽然可能不是最好的)是在第一列和第一行上使用 display: flex; 规则。