有没有办法复制exactly这个布局没有表格（仅使用CSS和div，没有Javascript）IE8:
http://jsfiddle.net/u0u7snh6/2/
我尝试过多种场景IE8似乎很混乱：
- Height of the content cell
- 要么高度没有使用 100% 的可用空间
- 要么高度使用超过100%导致溢出无法去除
- 内容单元格的对齐方式
这个单词exactly在这里非常重要...除此布局之外的任何内容都不起作用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%;
}
None
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
