css - tamaño - Visualización de IE: el elemento de celda de tabla ignora la altura: 100%
tablas html avanzado (2)
Necesito construir dinámicamente una tabla para contener algunos datos.
He seguido el enfoque habitual de usar divs con
display: table
,
display: table-row
y
display: table-cell
:
.tab {
display: table;
height:100%;
width: 200px;
}
.row {
height: 100%;
display: table-row;
}
.elem {
border: 1px solid black;
vertical-align: top;
display: table-cell;
height:100%;
background: blue;
}
.content {
height: 100%;
background: greenyellow;
}
<div class="tab">
<div class="row">
<div class="elem">
<div class="content">
Content
</div>
</div>
<div class="elem">
<div class="content">
Longer content that will need to wrap around eventually you know and don''t you hate it when things don''t end as you expect them octopus
</div>
</div>
</div>
</div>
En la mayoría de los navegadores obtengo el resultado esperado:
Sin embargo, en IE8 (y posiblemente en versiones posteriores, no he probado versiones posteriores), obtengo lo siguiente:
La
height: 100%
establecida en el div que rodea
"Contenido"
se ignora.
Según CanIUse , IE8 debería ofrecer soporte completo para las propiedades de visualización relacionadas.
He examinado varias preguntas similares sobre SO sin encontrar una solución que funcione: la mayoría de las soluciones se basan en Javascript (que estoy buscando evitar), usan una altura fija (ibid anterior) o no funcionan en IE8.
Desafortunadamente, el efecto de los valores porcentuales para la
height
en la
display: table-row
y
display: table-cell
elementos de
display: table-cell
no está definido de acuerdo con la
spec
:
CSS 2.1 no define cómo se calcula la altura de las celdas y las filas de la tabla cuando se especifica su altura utilizando valores porcentuales.
Entonces, si bien un navegador puede afirmar que ofrece soporte completo para el diseño de la tabla, ciertos aspectos, como las alturas porcentuales, pueden no implementarse consistentemente en todos los navegadores porque no hay un comportamiento correcto. Podría intentar plantear un problema en Microsoft Connect con la esperanza de que cambien el comportamiento para que sea interoperable, pero mientras tanto necesitará encontrar una solución alternativa diferente (e incluso entonces no puede garantizar que el comportamiento seguirá siendo interoperable, incluso en otros navegadores).
Para empeorar las cosas, acabo de probar y esto afecta a todas las versiones de IE hasta 11 inclusive, lo que significa que un hack específico de IE se quedará corto aquí. Si necesita usar un diseño de tabla CSS, como lo demuestra el hecho de que necesita admitir IE8, probablemente no sea posible una solución alternativa de CSS puro.
Para Internet Explorer 8-10
table-cells
con
height: 100%;
tiene que estar envuelto por
table-row
con
height: 100%;
.
HTML para IE debería ser como:
table > table-row > table-cell
Mientras que otros navegadores funcionarán correctamente con
table > table-row
or
table > table-cell
[editar] Revisé la pregunta nuevamente, y noté que desea establecer el 100% de altura no en las celdas de la tabla, sino en el contenido dentro de ella.
solución 1 : por lo tanto, para Internet Explorer, la altura del contenido está relacionada con el elemento más cercano con la altura establecida en unidades absolutas, como píxeles, em, si desea usar% altura, también puede necesitar establecer el 100% de altura en todos los elementos principales, esto será html y body. ejemplo de trabajo
solución 2 : simplemente agregue
.content {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.elem {
overflow: hidden;
}
No es necesario establecer la altura en ninguno de los elementos principales en este caso. ejemplo de trabajo
Espero que esto ayude.