IE - using 100% height within table-row - html

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;
}

Answer 2

IE gives you the perfect result you wanted. You are rendering it as table-row. You don't need to set specific height to the last row for it to fill the remaining space.
You are actually doing it wrong by setting height to 100%;
Here 100% means the actual height of row3 and chrome renders it as you have written.
i.e row3c overflows its parent row3.
since you specified pixel heights for the remaining rows it won't fill. You need to specify
percentage heights for all ( row3a -> height: 20%, row3b -> height: 30%, row3c -> height: 50%)
it will work

Answer 3

You are giving height to table as 300px, Here is fiddle http://jsfiddle.net/yKPq3/11/ and assuming you want table to be filled 300px, you need to change .row3 to height:150px and .row3c to height:60px