3 stacked divs with min-height - vertical-alignment

Question

I've been scratching my head while thinking about this issue.
I have 3 divs. The top and bottom div have a min-height, the middle div has unknown height (expands by content) but should be centered in the page. The top and bottom div should then fill up the remaining top and bottom space.
http://oi43.tinypic.com/5lb3v5.jpg
I'd like to have a pure HTML/CSS solution. Refactoring the HTML structure is possible..
Thanks
Current HTML structure:
<div id="page">
<div id="top">top div</div
<div id="middle">middle div</div>
<div id="bottom">bottom div</div>
</div>
And CSS:
#page {
min-height: 100%;
height: 100%;
width: 100%;
}
#top, #bottom {
min-height: 17.5%;
height: auto !important; /* Set height to content height but keep it minimum 17.5% */
height: 17.5%; /* Some IE don't understand min-height... */
width: 100%;
}
#middle {
height: auto;
width: 100%;
}

Answer 1

You can use Jquery for that, like this: http://jsfiddle.net/rebeen/8YVzb/
Html:
<div id="page">
<div id="top">top div</div>
<div id="middle">middle div</div>
<div id="bottom">bottom div</div>
</div>
Css:
#page {
min-height: 300px;
}
#top, #bottom {
background: #000;
min-height: 17.5%;
width: 100%;
}
#middle {
background:#555;
height: auto;
width: 100%;
}
Jquery:
$(function(){
var pageHeight = $('#page').height();
var topHeight = $('#top').height();
var bottomHeight = $('#bottom').height();
var middleHeight = $('#middle').height();
if(middleHeight > (pageHeight-(topHeight+bottomHeight)))
$('#middle').css(height, 'auto');
else
$('#top, #bottom').height((pageHeight-middleHeight)/2);
})

Answer 2

The easiest way I see is table display but it depends on wich browser you have to support (http://caniuse.com/#feat=css-table).
http://jsfiddle.net/NukYE/
body,
html {
height: 100%;
}
#page {
display: table;
min-height: 100%;
height: 100%;
width: 100%;
}
#top, #bottom {
display: table-row;
min-height: 17.5%;
height: auto !important; /* Set height to content height but keep it minimum 17.5% */
height: 17.5%; /* Some IE don't understand min-height... */
width: 100%;
}
#middle {
display: table-row;
height: auto;
width: 100%;
}