html - 获得两个其他固定元素之间的固定元素的最大可能高度

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%;}

我尝试使用 height:100%;在我的 #content但它仍然显示为 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%;
}