在两个其他固定元件之间获得固定元件的最大可能高度 [英] Attaining the maximum possible height for a fixed element between two other fixed elements

问题描述

好朋友在这里我的问题，
我试图让我

< div id =contentstyle = margin：0 auto;>< ;! - AJAX Loaded Content - >< / div>

可以在我之间的高度

< div id =headerstyle =position：fixed; top：0; width：100％ ; height：300px;>< / div>

和我的

< div id =footerstyle =position：fixed; bottom：0; width：100％; height：200px;>< / div>

我唯一的CSS规则是

html，body {position：固定的;高度：100％;宽度：100％;}

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

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

解决方案

正如我在评论中说的，你不能绕过固定或绝对定位的元素。一种方法是使用绝对定位的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％; 
} 
  

Alright guys here my problem, Im trying to make my

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

take as much height as it can between my

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

and my

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

The only css rule I have is

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

I tried using height:100%; on my #content but it still display as a height:auto;... Also, the whole thing still needs to display properly on mobile. So my question is: what CSS rule(s) should I add/remove to make my #content take the whole space between the two other <div>'s?

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

解决方案

As I said in my comment, you can't flow around fixed or absolutely-positioned elements. One approach might be to use an absolutely-positioned div with the same top and bottom dimensions as the heights of your #header and #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%;
}

这篇关于在两个其他固定元件之间获得固定元件的最大可能高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！