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

Answer 1

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

Answer 2

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

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

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