flexible div height between flexible height header and footer div's - html

Question

I want to achieve same thing horizontally as you can see here vertically and IE9+ compatible
[Edit]: I would like to have middle content on overflow have scroll bar, in this case tabling won't help.
jsFiddle
Css:
.container{
width: 100%;
height: 100%;
position: relative;
background-color: silver;
}
.top{
width: 50px;
height: 100%;
position: relative;
float: left;
background-color: red;
}
.bottom{
width: 50px;
height: 100%;
position: relative;
float: right;
background-color: green;
}
.middle{
background-color: blue;
overflow: hidden;
height: 100%;
}
HTML:
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
<div class="middle"></div>
</div>
Question: Is it possible without javascript and any fixed values?
I don't want to do something like this:
.top-div {
height: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.middle-div{
top: 50px;
bottom: 50px;
left: 0;
right: 0;
position: absolute;
}
.bottom-div{
height: 50px;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
In this scenario I'm forced to use JavaScript if I want to change height of footer or header.

Answer 1

using calc from css3
the style:
body,html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container{
height: 100%;
background-color: silver;
}
.container,.top, .bottom, .middle{
display:block;
clear:both;
position: relative;
width: 100%;
}
.top{
height: 50px;
width: 100%;
background-color: red;
}
.bottom{
height: 50%;
position: relative;
background-color: green;
}
.middle{
background-color: blue;
overflow: hidden;
-webkit-height: calc(100% - 100px);
-moz-height: calc(100% - 100px);
height: calc(100% - 100px);
}
the markup:
<div class="container">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
Demo: http://jsfiddle.net/YL4f3/1/

Answer 2

For now you have to give height to your containers. Once you have the content in place, just change the height to auto.
Also, when you change the height to auto, change the margin-top for the middle div as per your page needs.
<style>
.container div{
float:left; }
.container{
width: 100%;
height: 100%;
position: relative;
background-color: silver;
}
.top{
width: 100%;
height: 100px;
position: fixed;
top:0;
background-color: red;
}
.bottom{
width: 100%;
height: 100px;
position: fixed;
bottom:0;
background-color: green;
}
.middle{
margin-top:100px;
width: 100%;
background-color: blue;
height: 1000px;
}
</style>
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
<div class="middle"></div>
</div>