Diseño de tabla sin tabla en IE8

Question

Aug 30, 2014, 07:44 PM

header html css internet-explorer-8 footer

Diseño de tabla sin tabla en IE8

¿Hay alguna manera de replicarexactamente este diseño sin tabla (usando solo CSS y divs, sin Javascript) enIE8:

He probado múltiples escenarios yIE8 parece estar bien jugando:

Altura de la celda de contenido.O bien la altura no usa el 100% del espacio disponibleO la altura usa más del 100% y causa un desbordamiento que no se puede eliminarAlineación de la celda de contenido.

La palabraexactamente es muy importante aquí ... cualquier cosa que no sea este diseño no funcionará yIE8 es obligatorio.

De lo contrario, ¿usar tablas para el diseño es un gran problema en 2014?

Aquí está el código simple:

HTML

<body>
<table id="contentFrame">
    <tr style="background-color: pink;">
        <td>&nbsp;</td>
        <td id="contentCol">
            This is the header
        </td>
        <td>&nbsp;</td>
    </tr>
    <tr id="contentRow">
        <td></td>
        <td id="contentCell">
            This is the content
        </td>
        <td></td>
    </tr>
    <tr style="background-color: yellow;">
        <td></td>
        <td>
            This is the footer
        </td>
        <td></td>
    </tr>
</table>
</body>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#contentFrame {
    width: 100%;
    height: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    empty-cells: show;
}

#contentRow {
    background-color: green;
}

#contentCell {
    height: 100%;
    vertical-align: middle;
    background-color: white;
}

#contentCol {
    width: 80%;
}