19

withのラップの中にdivwithを作成しようとすると、いくつか問題が発生します。height:100%display:table-cell

Firefox と IE 9 では動作しないことに気付きました。

これが問題のフィドルです。期待どおりに動作し、Chrome または Opera が動作することがわかります。

コードの何が問題になっていますか?

それを解決する方法はありますか？

コンテンツを可変高コンテナの垂直方向の中央に配置するために、親のdisplay:tableandを保持したいと考えています。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;
}
4

2 に答える 2

29

が機能するにはheight:100%、すべての親コンテナが である必要がありますheight:100%。お気づきの場合、.table-cellスタイルには がありませんheight:100%。

このスタイルを追加すると、Firefox の問題が修正されます。

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

別の方法として、画像を CSS ではなく HTML に追加すること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%;
}
于 2013-10-17T13:45:32.873 に答える