Pantalla IE: el niño de la tabla-celda ignora la altura: 100%

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

O mira en Jsfiddle.

En la mayoría de los navegadores obtengo el resultado esperado:

Imagen de muestra

Sin embargo, en IE8 (y posiblemente versiones posteriores, no he probado versiones posteriores), obtengo lo siguiente:

Imagen de muestra 2

La height: 100% establecido 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 revisado varias preguntas similares sobre SO sin encontrar una solución de trabajo: la mayoría de las soluciones se basan en Javascript (lo cual estoy tratando de evitar), usan una altura fija (antes de ibid) 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án definidos de acuerdo con la especificación :

CSS 2.1 no define cómo se calcula la altura de las celdas de la tabla y las filas de la tabla cuando su altura se especifica usando valores de porcentaje.

Por lo tanto, aunque un navegador puede afirmar que ofrece soporte completo para el diseño de la tabla, ciertos aspectos, como el porcentaje de alturas, pueden no implementarse sistemáticamente en todos los navegadores porque no existe un comportamiento correcto. Podría tratar de plantear un problema en Microsoft Connect con la esperanza de que cambien el comportamiento para que sea interoperable, pero mientras tanto tendrá que encontrar una solución alternativa (y aun así 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 e incluyendo 11, lo que significa que un hack específico de IE se quedará corto aquí. Si necesita utilizar un diseño de tabla CSS, como lo demuestra el hecho de que necesita soportar IE8, entonces una solución CSS pura probablemente no sea factible.

Para las table-cells Internet Explorer 8-10 con height: 100%; tiene que estar envuelto por table-row con la 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 

[edit] Revisé nuevamente la pregunta y me di cuenta de que desea establecer el 100% de altura no en las celdas de la tabla, sino en el contenido que contiene.

solución 1 : para el contenido de Internet Explorer, la altura se relaciona con el elemento más cercano con altura establecida en unidades absolutas, como píxeles, em, si desea usar% de altura, también puede necesitar establecer 100% de altura en todos los elementos principales, esto será html y body. ejemplo de trabajo

solución 2 : simplemente agrega

 .content { padding-bottom: 9999px; margin-bottom: -9999px; } .elem { overflow: hidden; } 

No es necesario establecer la altura en Cualquiera de los elementos principales en este caso. ejemplo de trabajo .

Espero que esto ayude.