Table cell is set to height:100%. In IE it sets its height to 100% of table instead of table row

Question

I have a table with three rows. First and last have their height set. Middle one should take all space that's left. Inside that row i have three cells. Each one should have height equal to table row.

Quick example is here: http://jsbin.com/hidibate/3/edit

It works in Chrome/FF, but on IE there appears scroll. It's look like cell sets it height to 100% of table instead of row.

Source if jsbin isn't valid:

html:

<div id="o">
    <div id="sc">
        <div id="rc">
            <table>
                <tr id="f">
                    <td>foo</td>
                </tr>
                <tr id="m">
                    <td>
                        <div id="i">Fooo</div>
                    </td>
                </tr>
                <tr id="l">
                    <td>bazz</td>
                </tr>
            </table>
        </div>
    </div>
</div>    

css:

#o {
    background-color:red;
    width: 500px;
    height:360px;
    position:relative;
}

#sc{
    height:100%;
    width:100%;
    position:relative;
    overflow:auto;
}

#rc{
    height:100%;
    width:100%;

}
table {
    height:100%;
    width:100%;
    border-collapse:collapse;
    padding:0;
    border:none;
    empty-cells:show;
    overflow:hidden;
}
#f {
    height:20px;
    background-color:blue;
}
#l {
    height:30px;
    background-color:green;
}
#m {
    background-color:yellow;
}
#m td {
    position:relative;
}
#i {
    height:100%;
    width:100%;
    background-color:orange;
}

Answer 1

#m {
    background-color:yellow;
    height:100%;
    width:100%;
}

try this