html - resto - div que ocupe toda la pantalla
Diseño de tabla sin tabla en IE8 (0)
¿Hay alguna manera de replicar exactamente este diseño sin tabla (usando CSS y divs solamente, sin Javascript) en IE8 :
http://jsfiddle.net/u0u7snh6/2/
He intentado varios escenarios y IE8 parece estar jugando:
- Altura de la celda de contenido
- O la altura no usa el 100% del espacio disponible
- O la altura usa más del 100% y causa un desbordamiento que no se puede eliminar
- Alineación de la celda de contenido
La palabra exactamente es muy importante aquí ... cualquier cosa que no sea este diseño no funcionará y IE8 es obligatorio.
De lo contrario, ¿el uso de 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> </td>
<td id="contentCol">
This is the header
</td>
<td> </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%;
}