CSS - 让一个div消耗所有可用空间

Question

所有，

我有是假设只占用在浏览器中可用的屏幕空间的页面。

我有一个'顶部栏'和'底部栏'，它们都固定在页面的顶部和底部。我想要一个div，它将消耗（占用）上面提到的两个小节之间的剩余空间。

其关键是中间的div不是由顶部和底部的酒吧重叠。这是所有可能的CSS或我需要使用js。另外，如果我确实使用js，考虑到浏览器在js代码之前首先加载CSS，那么上面的js如何用于中心定位？

非常感谢，

Answer 1

您可以使用relative和absolute职位。下面一个例子：

CSS

html,body,#wrapper { 
     height:100%; 
     margin:0; 
     padding:0; 
    } 
    #wrapper { 
     position:relative; 
    } 

    #top, #middle, #bottom { 
     position:absolute; 
    } 

    #top { 
     height:50px; 
     width:100%; 
     background:grey; 
    } 
    #middle { 
     top:50px; 
     bottom:50px; 
     width:100%; 
     background:black; 
    } 
    #bottom { 
     bottom:0; 
     height:50px; 
     width:100%; 
     background:grey; 
    } 

HTML

<div id="wrapper"> 
    <div id="top"></div> 
    <div id="middle"></div> 
    <div id="bottom"></div> 
</div> 

演示：http://jsfiddle.net/jz4rb/4

Answer 2

This demo作品对我来说在Chrome12但YMMV这取决于您的浏览器需要支持。例如，position:fixed在IE6中无法正常工作。

Answer 3

使用的body标签绝对定位。 position:absolute零顶部和底部将“拉伸”的身体与浏览器窗口的大小相同。另外，设置height: 100%也适用，但我记得它对某些旧浏览器更为奇怪。

然后在中心div上使用绝对定位，并使用足够的顶部/底部偏移量来避免页眉和页脚栏。标题栏绝对与top定位，并且fotter绝对与bottom定位。

注意：这不适用于移动浏览器。您需要使用JS来获取窗口的高度并手动设置中心div的高度。