Attaining the maximum possible height for a fixed element between two other fixed elements

Question

Alright guys here my problem, Im trying to make my

<div id="content" style="margin:0 auto;"><!--AJAX Loaded Content--></div>

take as much height as it can between my

<div id="header" style="position:fixed;top:0;width:100%;height:300px;"></div>

and my

<div id="footer" style="position:fixed;bottom:0;width:100%;height:200px;"></div>

The only css rule I have is

html,body{position:fixed;height:100%;width:100%;}

I tried using height:100%; on my #content but it still display as a height:auto;... Also, the whole thing still needs to display properly on mobile. So my question is: what CSS rule(s) should I add/remove to make my #content take the whole space between the two other <div>'s?

http://jsfiddle.net/8AQQg/2/

Answer 1

As I said in my comment, you can't flow around fixed or absolutely-positioned elements. One approach might be to use an absolutely-positioned div with the same top and bottom dimensions as the heights of your #header and #footer:

http://jsfiddle.net/G3k54/2

html, body {
    position:fixed;
    height:100%;
    width:100%;
}
#header {
    position:fixed;
    top:0;
    width:100%;
    height:30px;
}
#footer {
    position:fixed;
    bottom:0;
    width:100%;
    height:20px;
}
#content {
    position: absolute;
    top: 35px;
    bottom: 25px;
    width: 100%;
}