how to stretch a DIV vertically inside a table-cell?  

I thought `height: 100%` would be fine  

but in some situations - it isn't (at least in IE8) 

here is a simple example:  

a 3-row table, with a header, a content, and a footer;  

I would like the 'content' DIV inside the 'content' cell to stretch 100% vertically;
it does in FF and Chrome, but not in IE8

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<div style="overflow: auto; height: 20em; width: 20em;">
    <table style="height: 100%; width: 100%;">
        <tr style="background-color: blue;">
            <td>
                <div>header</div>
            </td>
        </tr>
        <tr style="height: 100%;">
            <td style="background-color: yellow;">
                <div style="height: 100%; background-color: red; overflow-y: scroll;">
                    content
                </div>
            </td>
        </tr>
        <tr style="background-color: blue;">
            <td>
                <div>footer</div>
            </td>
        </tr>
    </table>
</div>

```

<http://jsfiddle.net/mWMmy/14/>

could anyone suggest a solution to this simple problem?
it has to work in IE8, FF any Chrome (IE7 and older is not important)  

and it has to be CSS-based (no javascript)

please, do not suggest wisdoms like 'dont use tables for layout', as I could use DIVs with `display: table`, etc. - the problem is the same (I used TABLE, TR, TD in the example because it is more readable this way)