3 rows layout, with total min-height: 100% - css

Question

I would like to achieve a 3 rows layout that behaves like this:
Content is displayed in the middle row. With no content, it just has the fixed height header on top of the screen and the fixed hight footer at the bottom. The middle row is empty and fills up the remaining height of the window.
With increasing content, the middle row gets larger. When it reaches the max size, the total layout size increases, so that the user now has to scroll to see the lower content and the footer.
I kind of managed to do that with tables:
http://jsfiddle.net/v73c4L7n/8/ (lot of content)
http://jsfiddle.net/v73c4L7n/9/ (little content)
HTML
<table class="main">
<tr><td>HEADER</td></tr>
<tr class="middle">
<td>
<div class="area">
<p>Content</p>
<p>Content</p>
</div>
</td>
</tr>
<tr><td>FOOTER</td></tr>
</table>
CSS
body, html {
height: 100%;
padding:0;
margin:0;
}
.area {
position: relative;
width: 300px;
background-color: green;
margin: 0px auto;
min-height: 100%;
height: 100%;
}
.main {
height: 100%;
width: 100%;
}
.main tr:first-child, .main tr:last-child {
height: 50px;
}
The problem is, that it doesn't seem to work in IE9 or IE10. I think, the problem is the height:100% of .area inside a table cell, that has no explicit height.
So I wondered if there is a better approach to this kind of layout.

Answer 1

have you given a try to set .middle height to 100% too ?
this way, the .middle <tr> will take as much place wich remains, others <tr> will expand according to their content.
http://jsfiddle.net/v73c4L7n/10/ (works in latest browsers .
updated CSS:
body, html {
height: 100%;
padding:0;
margin:0;
}
.area {
width: 300px;
background-color: green;
margin: 0px auto;
min-height: 100%;
height: 100%;
padding:1px
}
.main {
table-layout: fixed;
border-collapse: collapse;
background-color: red;
height: 100%;
width: 100%;
}
.main .middle > td {
background-color: yellow;
width: 100%;
}
.main tr:first-child, .main tr:last-child {
height: 50px;
}
.main tr:first-child > td {
width: 100%;
background-color: rgba(0,0,255,0.5);
}
.main tr:last-child > td {
width: 100%;
background-color: rgba(0,0,255,0.5);
}
.middle {
height:100%;
}
It worlks too with display:table and regular tag elements such as header, main and footer. http://jsfiddle.net/v73c4L7n/13/
Display:flex; makes things even easier : http://jsfiddle.net/v73c4L7n/14/
display:table is understood since IE8, flex since IE10 :(

Answer 2

Use divs not tables if you can. I would use the calc(expression) to get 100% height minus the sum of the footer and header. Look here in the fiddle. If you delete some of the paragraphs in the content div you will see it moves the footer to the bottom of the page even if theres no content.
JSFiddle
HTML
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="content">
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
</div>
<div id="footer">
FOOTER
</div>
CSS
html, body {
background-color:yellow;
height:100%;
}
* {
margin:0;
padding:0;
}
#wrapper {
height:100%;
margin: 0 auto;
}
#header{
height: 50px;
width: 100%;
background-color:purple;
}
#content {
background-color:green;
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: -webkit-calc(100% - 100px); /* Chrome, Safari */
min-height: calc(100% - 100px); /* IE9+ and future browsers */
width:300px;
margin:0 auto;
}
#footer {
height: 50px;
width:100%;
background-color:purple;
}