withのラップの中にdiv
withを作成しようとすると、いくつか問題が発生します。height:100%
display:table-cell
Firefox と IE 9 では動作しないことに気付きました。
これが問題のフィドルです。期待どおりに動作し、Chrome または Opera が動作することがわかります。
コードの何が問題になっていますか?
それを解決する方法はありますか?
コンテンツを可変高コンテナの垂直方向の中央に配置するために、親のdisplay:table
andを保持したいと考えています。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;
}