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的高度。