Height: 100% inside table-cell does not work in Firefox and IE

Question

I'm having trouble trying to create a div with height:100% inside the wrapper using display:table-cell .

I noticed that it does not work in Firefox and IE 9.

Here is the fiddle with the problem . You may notice that it works as expected, and either Chrome or Opera.

What is wrong with the code?

Is there any way to solve it?

I want to keep the display:table and display:table-cell parents in order to center the content vertically in variable height 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; } 

Answer 1

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

Adding this style fixes the problem in Firefox:

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

Alternatively, an image can also be added to your HTML, rather than as a CSS background-image .

 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 shown below

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