Hey guys

Im new to making sites with CSS layouts rather than table layouts (my bad!).

Instead of having a table with 3 rows (A header, Body and a footer) im making 3 separate DIV's

How to I get my body DIV to stretch to 100% height so its a liquid page?

Thanks for any help!

6 answers

This was chosen as the best answer

You're looking for a vertical liquid page? So the header is at the top of the browser window, the footer at the bottom, and the body occupies the entirety of the space in between? If that's the case, you could do something like absolutely position your divs, sizing the main content relative to the dimensions of the container (which in this case is the browser window). The markup could be something like

Answered about 10 years ago by Brian Seward
Dom 15

Your body div will always be the height of the content contained within it. You could apply the rule height: 100%; to your body div, but this will not work in all browsers. Also if your header and footer have already got heights you will need to take these into account.

If you are just trying to force your footer to the bottom of your pages I would suggest trying one of these two methods. Sticky Footer

New CSS Sticky Footer

Answered about 10 years ago by Dom

Your best bet would be the sticky footer - positioning elements absolutely is never a good idea, unless it's used sparingly and never for major structural elements.

Answered about 10 years ago by webcodeslinger
Tilman 1


Answered about 10 years ago by Tilman
Chris W 50

Using Brian's markup the content area doesn't seem to stretch to 100% height in good ol' IE6 any suggestions?

Answered about 10 years ago by Chris W
danwellman 5600

You should be able to use min-height to set a minimum height for the content div, this will work in all browsers, and there is even a very good 'hack' by Dustin Diaz that makes it work in IE6, see min-height fase hack

Answered about 10 years ago by danwellman