CSS - Making a div consume all available space

Question

All,

I have a page which is suppose to take up only the available screen space in the browser.

I have a \'top bar\' and a \'bottom bar\', both of which are f

Answer 1

You can use relative and absolute positions. Here an example:

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

Demo: http://jsfiddle.net/jz4rb/4