Макет таблицы без таблиц в IE8
Есть ли способ репликацииименно так этот макет без таблицы (с использованием только CSS и div, без Javascript) вIE8:
http://jsfiddle.net/u0u7snh6/2/
Я пробовал несколько сценариев иIE8 Кажется, что либо возиться:
Высота ячейки содержимогоЛибо там высота не использует 100% доступного пространстваЛибо высота использует более 100% и вызывает переполнение, которое не может быть удаленоВыравнивание содержимого ячейкиСловоименно так очень важно здесь ... ничего, кроме этого макета не будет работать иIE8 является обязательным.
Иначе, станет ли использование таблиц для разметки большим делом в 2014 году?
Вот простой код:
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%;
}