高度：表格单元中的100％在Firefox和IE上不起作用

一尘不染

高度：表格单元中的100％在Firefox和IE上不起作用

css

我在尝试div使用height:100%内包装创建with时遇到了一些麻烦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;
}

阅读 419

2020-05-16

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

2020-05-16