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

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

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

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

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

Есть ли способ его решить?

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

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

Ответ 1

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

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

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

В качестве альтернативы также может быть добавлено изображение в ваш HTML, а не как 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>

Ответ 2

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

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

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