Search code examples
htmlcssheightquirks-mode

Emulate quirks mode table rendering

Our application makes heavy use of tables for layout and positioning, and has in the past been IE (quirks-mode) only. Moving forward, we are trying to get out of quirks mode, and replace the tables with divs and a more semantic layout.

The one thing stopping us is a quirks mode "feature" which allowed us to set height=100% on a table row, and have the row take up the remaing vertical space. So far, we have not been able to find a way to do this outside of quirks mode, either with or without tables.

This is the code we are using in the body of the page. No styling shown here, but the effect is still the same:

<table width="100%" height="100%" border="0">
    <tr>
        <td>
            <table width="100%" height="100%" border="1">
                <tr>
                    <th>This is my header bar</th>
                </tr>
            </table>
        </td>
    </tr>
    <tr height="100%">
        <td>
            <table width="100%" height="100%" border="1">
                <tr>
                    <td>This is my main section bar</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table width="100%" height="100%" border="1">
                <tr>
                    <td>This is my footer bar</th>
                </tr>
            </table>
        </td>
    </tr>

This is what it looks like in Quirks mode. Note that the middle row (with height="100%") has expanded to take up the remaining vertical space:

Quirks mode rendering

Standards mode renders the same code like this:

Standards modes

jsFiddle with the code: http://jsfiddle.net/RBeWN/3/ (Note that due to iFrames, etc. the code won't actually render in quirks mode on jsFiddle but you can force it by using Dev Tools).

I attempted to do this with divs and some css, but it doesn't work: http://jsfiddle.net/BVMhR/3/. Setting the main div to height: 100%; gives it the same height as its parent, rather than making it take the remaining space. Setting box-sizing: border-box; makes no difference to this either.

Could someone help me find a solution to this problem? I'd like to be able to do it without javascript if at all possible, but if Javascript is needed, it would have to be a generic solution that can run on every page so that there isn't too much development overhead for setting it up.

Solution

  • After playing around with quite a few different layouts, and clarifying a few specifics regarding the requirements, I have found a way to do this with pure CSS.

    It does involve knowing the heights of both the top and bottom row (although they could be specified in %), and also does involve a few extra layers of divs.

    My example can be found in this jsFiddle. Notice that when expanding / shrinking the window, the middle row re-sizes appropriately. It is also possible to make this one into a scrolling div if necessary (with overflow: auto) so that the content will scroll when it is too long.

    Feel free to contact me with any extra questions about this layout if needed.