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

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.