Make element 100% height of parent

Question

I have a parent which has the CSS property of table-cell, with a child element that need to be 100% the height of the parent. I cannot get this to work in IE Edge - any ideas?

<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%;
}

See JS Fiddle: http://jsfiddle.net/82no4o0x/10/

are you still looking for an answer to this question? – Michael Benjamin Dec 30 '15 at 16:52 — Michael Benjamin, Dec 30 '15 at 16:52

score 0 · Answer 1 · edited May 23 '17 at 12:16

You have this code:

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

You're asking the a to be height: 100%. But 100% of what? There is no frame of reference. None of the parents have any height specified.

To see what I mean, make this adjustment to the parent:

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

Now it should work. See demo: http://jsfiddle.net/82no4o0x/23/

When using percentage heights in CSS you need to specify the height for all parent elements, up to and including body and the root element (html).

Read more here: Working with the CSS height property and percentage values

score 0 · Answer 2 · answered Oct 30 '15 at 04:23

Because you haven't defined the table or the table row with a height, when you give the link a height of 100%, the link doesn't know what you want it to be 100% of. Although it looks pretty straight forward to you and me. So first of, try giving your table a fixed height and then making your cells height 100%... But I'm guessing you don't want to do that because you want it to grow or shrink depending on the content within it. I tried a few techniques using position absolute on the cell and positioning it relative to the row, but that didn't work in IE for some reason. So I came up with a bit of a trick/hack using a large top and bottom padding and a negative top and bottom margin.

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

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

Make element 100% height of parent

2 Answers2