100% Height Fail

<html><body>
    <table border="1">
        <tr>
            <td rowspan="2" valign="top">left column<div style="height: 500px; border: 1px #F00 solid;"></div></td>
            <td height="1" valign="top">top row above content</td>
        </tr>
        <tr>
            <td height="220" valign="top"><!-- my content begins here -->
                <style type="text/css">
                    .mydiv {
                        height: 100%;
                        border: 1px #00F solid;
                    }
                </style>
                <div class="mydiv">wooo</div>
            <!-- my content ends here --></td>
        </tr>
    </table>
</body></html>