Question

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

<div id="content" style="margin:0 auto;"></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%;
}

在两个其他固定元件之间获得固定元件的最大可能高度

1 个答案: