css - tamaño - Visualización de IE: el elemento de celda de tabla ignora la altura: 100%

tablas html avanzado

Question

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>

O ver en Jsfiddle.

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.

Answer 1

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.

Answer 2

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.