在两个其他固定元素之间达到固定元素的最大可能高度

Question

好了，伙计们，我的问题是，我正在努力制作

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

在我的之间尽可能高

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

和我的

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

我唯一的css规则是

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

我尝试在#content上使用height:100%;，但它仍然显示为height:auto;。。。此外，整个东西仍然需要在手机上正确显示。所以我的问题是：我应该添加/删除什么CSS规则来使我的#content占据另外两个<div>之间的全部空间？

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

Answer 1

正如我在评论中所说，您不能围绕固定或绝对定位的元素流动。一种方法可能是使用一个绝对定位的div，其顶部和底部尺寸与#header和#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%;
}