html - tablas - altura: 100% dentro de la celda de tabla no funciona en Firefox y IE

obtener datos de una tabla html javascript

Question

Estoy teniendo algunos problemas al intentar crear un div con height:100% dentro de un wrap con display:table-cell .

Me di cuenta de que no funciona en Firefox e IE 9.

Aquí está el violín con el problema . Puedes notar que funciona como se esperaba y Chrome u Opera.

¿Qué pasa con el código?

¿Hay alguna forma de solucionarlo?

Quiero conservar la display:table y display:table-cell de los padres para centrar el contenido verticalmente en contenedores de alturas variables.

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

Answer 1

Debe establecer las .content y .table .table-cell siguiente manera

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

Answer 2

Para la height:100% para trabajar, todos los contenedores principales deben ser de height:100% . Si lo nota, sus .table-cell no tienen height:100% .

Agregar este estilo soluciona el problema en Firefox:

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

Como alternativa, agregar la imagen a su HTML en lugar de agregar una imagen de background-image CSS también podría funcionar.

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