0

好吧，伙计们，我的问题，我试图让我的

<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/

4

1 回答 1

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%;
}
于 2013-02-20T19:00:06.570 回答