使元素高度为父级的100％

Question

我有一个具有table-cell 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 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％是什么？ 没有参考框架。 没有父母指定任何高度。

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

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

现在应该可以了。 观看演示： http : //jsfiddle.net/82no4o0x/23/

在CSS中使用百分比高度时，您需要指定所有父元素的高度，直到并包括正文和根元素（ html ）。

在此处阅读更多内容： 使用CSS height属性和百分比值

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/