桌面单元格内的高度：100％不适用于Firefox和IE怎么处理？
桌面单元格内的高度：100％不适用于Firefox和IE怎么处理？
提问于 2018-03-13 08:17:29
我遇到了一些麻烦，试图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;
}
Stack Overflow用户
发布于 2018-03-13 17:50:31
你必须设置.content和.table .table-cell类别如下
.content {
display: table;
height: 100%;
}
.table, .table-cell {
height: 100%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100004250
复制相关文章
相似问题