CSS-使div占用所有可用空间

全部,

我有一个页面，它应该只占用浏览器中可用的屏幕空间

我有一个“顶栏”和一个“底栏”，它们都固定在页面的顶部和底部。我想有一个div，它将消耗（占用）上述两个条之间的剩余空间

至关重要的是，中间的div不能被顶部和底部的条重叠。这在CSS中是可能的还是我需要使用js

另外，如果我使用js，考虑到浏览器在js代码之前首先加载CSS，那么上面使用js进行中心定位是如何实现的

---

非常感谢，

适用于我的Chrome12，但这取决于您需要支持的浏览器。例如，

position:fixed

在IE6中无法正常工作。

您可以使用

相对

和

绝对

位置。这里有一个例子：

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>

---

演示：

在

主体

标签上使用绝对定位<代码>位置：顶部和底部为零的绝对将“拉伸”主体，使其与浏览器窗口的大小相同。或者，设置

height:100%

也可以，但我记得它对某些旧浏览器非常有效

然后在中心div上使用绝对定位，具有足够的顶部/底部偏移，以避免页眉和页脚栏。标题栏的绝对位置为

顶部

，字体的绝对位置为

底部

注意：这在移动浏览器上不起作用。您需要使用JS获取窗口的高度，并手动设置中心div的高度