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