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

【问题标题】：Attaining the maximum possible height for a fixed element between two other fixed elements在其他两个固定元素之间达到固定元素的最大可能高度
【发布时间】：2013-02-20 18:06:06
【问题描述】：

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

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

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

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

【问题讨论】：

你能做一个jsfiddle.net 吗？您不应拥有多个具有相同 ID 的元素。
如果没有脚本，您将无法在固定元素之间（之间）流动。
这是我在编辑中修复的错误 ID 添加了一个 jsfiddle.net
由于您使用的是html5，因此没有理由滥用div 作为页眉和页脚。请改用header 和footer 标签。
谢谢，这实际上是一个很好的提示！

标签： html css mobile height fixed

【解决方案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%;
}

【讨论】：

请随意提及它是如何失败的，我会努力改进它。
失败的是我必须使用精确的值（即顶部：35px；底部：25px；），我一直在寻找“一刀切”的解决方案，但如果它没有t 只存在 CSS，你的答案是最接近的！