height:100% inside table-cell 不适用于 Firefox 和 IE

Posted 2023-03-05

【中文标题】height:100% inside table-cell 不适用于 Firefox 和 IE

【英文标题】：height:100% inside table-cell not working on Firefox and IE

【发布时间】：2013-10-26 00:37:05

【问题描述】：

我在尝试用height:100% 创建一个div 时遇到了一些麻烦，该display:table-cell 包裹在其中。

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

Here's the fiddle with the problem。您会注意到它与 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;

【问题讨论】：

可能重复：***.com/questions/3215553/…

也相关，有一个很好的答案，在这里：***.com/questions/27384433/…

【参考方案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>

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

【讨论】：

嗯，在 IE 中遇到了一些麻烦...让我尝试在 jsfiddle 上复制它。

好了，给你。 height:100% 仍然有问题。这将使用像素来解决，但我宁愿不。 （向下滚动查看第二页）：jsfiddle.net/54Jyp/9 这里是一个活生生的例子：alvarotrigo.com/fullPage/prueba/examples/backgrounds.html 记得用 IE 9 来查看。

在您的实际示例中，您的问题是由padding-top:30% 引起的吗？我想我对你的生活环境中问题的性质有点困惑。

我不知道可能是什么问题。不过，它似乎只发生在 IE 上。

好吧，无论如何，谢谢。这似乎很难测试，所以无论如何我都会接受你的答案。

【参考方案2】：

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

.content 
    display: table;
    height: 100%;


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