高度：100％内的表格单元格无法在Firefox和IE上运行

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

我有一些麻烦试图创建一个高度div：100％在一个带有display：table-cell的包装内。

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

我注意到它在Firefox和IE 9中不起作用。

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

这是问题的小提琴。您可以注意到它按预期工作，Chrome或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.

我想保留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;
}

2 个解决方案

#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%.

对于高度：100％工作，所有父容器必须是高度：100％。如果您注意到，您的.table-cell样式没有高度：100％。

Adding this style fixes the issue in Firefox:

添加此样式可修复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.

作为替代方案，将图像添加到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-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%;
}

#2

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

您必须设置.content和.table .table-cell类，如下所示

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

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