Tableless Table Layout in IE8

2019-02-28 14:07发布

问题:

Is there as way to replicate exactly this layout without table (using CSS and divs only, no Javascript) in IE8:

http://jsfiddle.net/u0u7snh6/2/

I've tried multiple scenarios and IE8 seems to be either messing:

Height of the content cell
- Either there height doesn't use 100% of the space available
- Either the height uses more than 100% and cause overflow that cannot be removed
Alignment of the content cell

The word exactly is very important here... anything other than this layout will not work and IE8 is mandatory.

Otherwise, is using tables for layout a big deal in 2014?

Here is the simple code:

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%;
}

Tableless Table Layout in IE8

问题:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮