Height 100 percent under display: table-cell in IE

Question

I would like to have a child element under a div with "display: table-cell" take up the whole height of the parent div.

Does anybody have any idea why the following snippet works like a charm in Chrome and FF, and it breaks under IE, including 10?

HTML:

<body>
    <div class="table">
        <div class="table-cell">
            this normally has 100%
        </div>
        <div class="table-cell">
            <div>
                this should get height 100% too
            </div>
        </div>
    </div>
</body>

CSS:

.table {
    display: table;
    height: 100%;
}
.table > div:first-child {
    height: 300px;
    background: #f00;
}
.table-cell {
    display: table-cell;
    vertical-align: top;
    height: 100%;
}
.table-cell > div {
    height: 100%;
    background: #0c0;
}

http://jsfiddle.net/5zu8unzz/

Thanks.

possible duplicate of [height:100% inside table-cell not working on Firefox and IE](http://stackoverflow.com/questions/19428121/height100-inside-table-cell-not-working-on-firefox-and-ie) — emerson.marini, Oct 17 '14 at 09:38

score -1 · Answer 1 · edited May 23 '17 at 12:10

-1

Same problem in IE 11 :-(

Obviously, the behavior of height with table-cells is not part of the spec.

Just found this thread: IE display: table-cell child ignores height: 100%

Really sucks!!!

edited May 23 '17 at 12:10

Community

1
1

answered May 21 '15 at 17:45

Miglosh

157
2
7

Height 100 percent under display: table-cell in IE

1 Answers1

Linked