height: 100% внутри table-cell не работает в Firefox и IE

У меня возникают проблемы с созданием div с height:100% внутри обертки с display:table-cell .

Я заметил, что он не работает в Firefox и IE 9.

Вот сценарий проблемы . Вы можете заметить, что он работает так, как ожидалось, и Chrome или Opera.

Что не так с кодом?

Есть ли способ решить эту проблему?

Я хочу сохранить display:table и display:table-cell родителей, чтобы центрировать содержимое по вертикали в контейнерах с переменной высотой.

HTML

 

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://sofru.miximages.com/html/Solar_eclipse_corona_node_full_image.jpg); background-size:cover; } 

Для height:100% для работы, все родительские контейнеры должны быть height:100% . Если вы заметили, ваши .table-cell не имеют height:100% .

Добавление этого стиля устраняет проблему в Firefox:

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

Как альтернатива, добавление изображения в ваш HTML, а не как background-image 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-size:cover; } .content img { width:100%; height:100%; } 
 

Вы должны установить .content и .table .table-cell как .table .table-cell ниже.

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