桌面单元格内的高度:100%不适用于Firefox和IE怎么处理?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (50)

我遇到了一些麻烦,试图divheight:100%里面的包裹来创建一个display:table-cell

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

你可以注意到它可以按照预期的方式运行,或者Chrome或者Opera。

代码有什么问题?

有什么办法解决它?

我想保留display:tabledisplay: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;
}
提问于
用户回答回答于

为了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%;
}
用户回答回答于

你必须设置.content.table .table-cell类别如下

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

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

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动