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

Question

全部，

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

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

重要的是中间的 div 不与顶部和底部的栏重叠。这完全可以使用 CSS 还是我需要使用 js。

此外，如果我确实使用 js，考虑到浏览器在 js 代码之前首先加载 CSS，那么使用 js 进行中心定位如何解决上述问题？

非常感谢，

Answer 1

您可以使用相对 和绝对 位置。举个例子:

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