IE - using 100% height within table-row

Question

I'm using css tables where the last table row has height 100% - to fill up the remaining height.

FIDDLE

This works for me cross-browser (Including IE).

However, if I then add in the last table-row some divs with fixed height (this is dynamic content - I don't know how many of them there are) where the last div has height:100% - in order to fill up the last table-row. - like this:

FIDDLE -

this now doesn't work in IE (Even IE10)

What must I do to make this work in IE ?

(Edit: As correctly pointer out in the comments: It doesn't work in any browser - although in Chrome and firefox it looks like it works - the height:100% on the last div of the third row wasn't filling up the remaining height but rather taking up the complete height of row3...

So I attempted using table rows for row 3:- FIDDLE... Now this works in other browsers, but still doesn't work in IE!)

Markup

<div class="table">
    <div class="row row1">row1</div>
    <div class="row row2">row2</div>
    <div class="row row3">
        <div class="row3a">row3a</div>
        <div class="row3b">row3b</div>
        <div class="row3c">row3c</div> <!-- in IE this doesn't fill the last row -->
    </div>
</div>

CSS

.table
{
    display: table;
    width: 600px;
    height: 300px;
}
.row
{
    display: table-row;
}
.row1
{
    height: 50px;
    background: pink;
}
.row2
{
    height: 100px;
    background: orange;
}
.row3
{
    height: 100%;
    background: yellow;
}
.row3a
{
    height: 30px;
    background: purple;
}
.row3b
{
    height: 60px;
    background: aqua;
}
.row3c
{
    height: 100%;
    background: brown;
}

Answer 1

Pure CSS, Cross-Browser Solution, Without using CSS Table Layout.

I actually recomend you to USE the CSS table layout if you can. (I don't know why you don't want it in your rows, its perfectly fine.) OR the flexbox layout, although it's not properly implemented yet in all browsers.. --I just read in the comments that it didn't worked for you in IE, well: my solution does.. even with IE8.

Working Fiddle

HTML: I'm using the extra wrapper I mentioned in the comment.

<div class="table">
    <div class="row1">row1</div>
    <div class="row2">row2</div>
    <div class="row3">
        <div class="Wrapper">
            <div class="row3a">row3a</div>
            <div class="row3b">row3b</div>
            <div class="row3c">row3c</div>
        </div>
    </div>
</div>

CSS: (most of it if for the backgrounds)

.table
{
    width: 600px;
    height: 900px;
}
.row1
{
    height: 50px;
    background: pink;
}
.row2
{
    height: 100px;
    background: orange;
}
.row3
{
    background: yellow;
    position: relative;
}

.row3a
{
    height: 30px;
    background: purple;
}
.row3b
{
    height: 60px;
    background: aqua;
}
.row3c
{
    background: brown;
}

.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.table:before, .Wrapper:before
{
    content: '';
    height: 100%;
    float: left;
}

.row3:after, .row3c:after
{
    content: '';
    display: block;
    clear: left;
}