html - 使元素成为父元素的 100% 高度

Question

我有一个具有 table-cell CSS 属性的父元素，其子元素的高度必须是父元素的 100%。我无法在 IE Edge 中使用它 - 有什么想法吗？

<div class="table">
    <div class="table-row">
        <div class="table-cell-1">
            <a>need 100%!</a>
        </div>
        <div class="table-cell-2">
            some content<br>
            that is <br>
            quite high
        </div>
     </div>
</div>

.table {
    display:table;
}

.table-row {
    display:table-row;
}

.table-cell-1, .table-cell-2 {
    display:table-cell;
    width:100px;
}

.table-cell-1 {
    background-color:red;
}

.table-cell-2 {
    background-color:green;
}

.table-cell-1 a {
    display: inline-table;
    background-color:#ccc;
    height:100%;
    min-height:100%;
}

参见 JS Fiddle:http://jsfiddle.net/82no4o0x/10/

Answer 1

你有这个代码:

.table-cell-1 a {
    display: inline-table;
    background-color:#ccc;
    height:100%;
    min-height:100%;
}

您要求 a 为 height: 100%。但是 100% 的是什么？没有参照系。 parent 均未指定任何高度。

要明白我的意思，请对父级进行此调整:

.table-cell-1 {
    background-color:red;
    height: 100px; /* new */
}

现在它应该可以工作了。参见演示:http://jsfiddle.net/82no4o0x/23/

在 CSS 中使用百分比高度时，您需要指定所有父元素的高度，包括 body 和根元素 (html)。

在这里阅读更多:Working with the CSS height property and percentage values