height:100% inside table-cell not working on Firefox and IE

Question

I'm having some troubles trying to create a div with height:100% inside a wrap with display:table-cell.

I've noticed it doesn't work in Firefox and IE 9.

Here's the fiddle with the problem. You can notice it works as expected and Chrome or Opera.

What's wrong with the code?

Is there any way to solve it?

I want to preserve the display:table and display:table-cell of the parents in order to center the content vertically on variable heights containers.

HTML

<div class="table">
    <div class="table-cell">
        <div class="content"></div>
    </div>
</div>

CSS

body, html {
    margin:0;
    padding:0;
    height:100%;
}
.table {
    display:table;
    width:100%;
    height:100%;
}
.table-cell {
    display:table-cell;
    vertical-align: middle;
    width:100%;
}
.content {
    height: 100%;
    display: block;
    overflow: hidden;
    position: relative;
    background: url(http://spaceinimages.esa.int/var/esa/storage/images/esa_multimedia/images/2012/11/solar_eclipse_corona/12092636-3-eng-GB/Solar_eclipse_corona_node_full_image.jpg);
    background-size:cover;
}

possible duplicate: http://stackoverflow.com/questions/3215553/make-a-div-fill-an-entire-table-cell — Ciro Santilli OurBigBook.com, Jul 21 '14 at 14:25
also related, with a good answer, here: http://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100 — natevw, Oct 21 '15 at 19:49

score 29 · Accepted Answer · edited Sep 23 '14 at 12:19

29

For height:100% to work, all parent containers must be height:100%. If you notice, your .table-cell styles do not have height:100%.

Adding this style fixes the issue in Firefox:

.table-cell {
    display:table-cell;
    vertical-align: middle;
    width:100%;
    height:100%;
}

As an alternative, adding the image to your HTML rather than as a CSS background-image might also work.

body, html {
    margin:0;
    padding:0;
    height:100%;
}
.table {
    display:table;
    width:100%;
    height:100%;
}
.table-cell {
    display:table-cell;
    vertical-align: middle;
    width:100%;
}
.content {
    height: 100%;
    display: block;
    overflow: hidden;
    position: relative;
    background-size:cover;
}

.content img {
    width:100%;
    height:100%;
}

<div class="table">
    <div class="table-cell">
        <div class="content">
            <img src="http://spaceinimages.esa.int/var/esa/storage/images/esa_multimedia/images/2012/11/solar_eclipse_corona/12092636-3-eng-GB/Solar_eclipse_corona_node_full_image.jpg"/>
        </div>
    </div>
</div>

HTML

<div class="content">
    <img src="...your image url..." />
</div>

CSS

.table-cell {
    display:table-cell;
    vertical-align: middle;
    width:100%;
}

.content img {
    width:100%;
    height:100%;
}

edited Sep 23 '14 at 12:19

TRiG

10,148
7
57
107

answered Oct 17 '13 at 13:45

John Lieb-Bauman

1,426
12
25

Mmm having some troubles with it in IE... let me try to replicate it on jsfiddle. – Alvaro Oct 17 '13 at 13:51
Well here you have it. `height:100%` and still having the problem. It would be solve using pixels, but i rather not. (check the second page scrolling down): http://jsfiddle.net/54Jyp/9/ Here a living example: http://alvarotrigo.com/fullPage/prueba/examples/backgrounds.html Remember to check it with IE 9. – Alvaro Oct 17 '13 at 14:03
On your live example, is your problem caused by the `padding-top:30%`? I think I'm a little confused about the nature of the problem in your live environment. – John Lieb-Bauman Oct 17 '13 at 14:20
I don't know what could be the problem. It seems it only takes place on IE though. – Alvaro Oct 17 '13 at 14:34
Well, thanks anyway. This seems to be difficult to test so I will accept your answer anyway. – Alvaro Oct 17 '13 at 14:35

score -3 · Answer 2 · edited Jan 03 '16 at 12:29

-3

You must set the .content and .table .table-cell classes as below

.content {
    display: table;
    height: 100%;
}

.table, .table-cell {
    height: 100%;
}

edited Jan 03 '16 at 12:29

Max

6,821
3
43
59

answered Jan 03 '16 at 11:47

Marius Günter

1

height:100% inside table-cell not working on Firefox and IE

HTML

CSS

2 Answers2

HTML

CSS

Linked