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 fixed positioned at the top and bottom of the page. I want to have a div which will consume (take up) the remaining of the space inbetween the two bars mentioned above.

Its crucial that the middle div is not overlapped by the top and bottom bars. Is this at all possible with CSS or do I need to make use of js.

Also, if I do go with js, considering the browser loads up the CSS first before the js code, how is the above work out using js for centre positioning?

Many thanks,

Barrettbarrette

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

<div id="wrapper">
    <div id="top"></div>
    <div id="middle"></div>
    <div id="bottom"></div>
</div>

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

Willi

Answer 2

This demo works for me in Chrome12 but YMMV depending on which browsers you need to support. For example position:fixed does not work correctly in IE6.

Bernadette

Answer 3

Use absolute positioning on the body tag. position:absolute with zero top and bottom will "stretch" body to be the same size as the browser window. Alternatively, setting height: 100% also works but I remember it works wierd for certain old browsers.

Then use absolute positioning on the center div, with enough top/bottom offsets to avoid your header and footer bars. The header bar is absolutely positioned with top and the fotter is absolutely positioned with bottom.

Note: This won't work on mobile browsers. You'll need to use JS to get the window's height and manually set the center div's height.

Illumine

Answer 4

Great answer by Sotiris (https://mcmap.net/q/531884/-css-making-a-div-consume-all-available-space).

Add "overflow:auto" to middle, and it will behave more than perfectly when resizing the window.

Shellacking