Div in table rowspan not using full height

Question

I've got a pretty regular HTML <table> with one cell that spans multiple rows via rowspan. Inside of this cell I've got a <div> that I want to occupy the entire height of the cell but for the life of me I can't seem to figure it out. It seems similar to this post which mentions this Chrome bug but also seems so simple that maybe I'm just not thinking clearly.

Here's a stripped down version of my HTML:

<table>
    <tr>
        <td class="a" rowspan="2"><div>A</div></td>
        <td class="b"><div>B</div></td>
    </tr>
    <tr>
        <td class="c"><div>C</div></td>
    </tr>
</table>

And CSS:

td
{
    vertical-align: top;
}
td.a div
{
    background-color: #f00;
    height: 100%;
}

And a JSFiddle. And here's what I'm getting and what I'm trying to get:

What's really weird is if I use Chrome's inspector to change the <div> to display: inline-block and then set it back to display: block it actually looks pretty much exactly how I want it to.

(And no, switching away from a table isn't an option for this project, there's other code not shown that requires that.)

Answer 1

Option 1

Simply add overflow:auto; to your div CSS

Demo Fiddle

td
{
    vertical-align: top;
}
td.a div
{
    background-color: #f00;
    height: 100%;overflow:auto;
}

Option 2

Alternatively you'll need to define the height of your table in order for the child to be able to calculate what its 100% is 100% of.

Option 3

The only other way would be to set position:relative on the td elements then position:absolute for the child div