Html 高度：表格单元格内的 100% 在 Firefox 和 IE 上不起作用

height:100% inside table-cell not working on Firefox and IE

提问by Alvaro

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

我在尝试在包装内创建divwith 时遇到了一些麻烦。height: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:tableand display:table-cellof the parents in order to center the content vertically on variable heights containers.

我想保留父对象的display:table和display:table-cell，以便将内容垂直居中放置在可变高度容器上。

HTML

HTML

<div class="table">
    <div class="table-cell">
        <div class="content"></div>
    </div>
</div>

CSS

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

回答by John Lieb-Bauman

For height:100%to work, all parent containers must be height:100%. If you notice, your .table-cellstyles do not have height:100%.

为了height:100%工作，所有父容器必须是height:100%. 如果您注意到，您的.table-cell样式没有height: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-imagemight also work.

作为替代方案，将图像添加到 HTML 而不是作为 CSSbackground-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

HTML

<div class="content">
    <img src="...your image url..." />
</div>

CSS

CSS

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

.content img {
    width:100%;
    height:100%;
}

回答by Marius Günter

You must set the .contentand .table .table-cellclasses as below

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

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

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