Question

我有一个父属，其CSS属性为table-cell，其子元素必须是父元素高度的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小提琴：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％的是什么？没有参考框架。没有父母指定任何身高。

要了解我的意思，请对父母进行此调整：

.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

Answer 2

由于您尚未定义具有高度的表格或表格行，因此当您为链接指定100％的高度时，该链接并不知道您希望它是100％的高度。虽然你和我看起来很直接。首先，尝试给你的桌子一个固定的高度，然后让你的细胞高度100％...但我猜你不想这样做，因为你希望它增长或缩小取决于内容。我尝试了一些技术，使用单元格上的绝对位置并将其相对于行定位，但由于某种原因，它在IE中不起作用。所以我想出了一个使用大的顶部和底部填充以及负顶部和底部边距的技巧/黑客。

.table-cell-1 { overflow:hidden }
.table-cell-1 a {
  padding:2000px 0;
  margin:-2000px 0;
}

https://jsfiddle.net/82no4o0x/24/embedded/result/

使元素100％的父级高度

2 个答案: