View Full Version : CSS Layout elements 100% height

05-08-2007, 03:25 PM

I have a site layout built in CSS and am trying to get it so that the main content area flows to 100% height in the users web browser.

There are 3 main areas: the header (containing the menu etc.) then the main area under that, and a footer right at the bottom. I want the header and the footer to be fixed heights with the main content area flowing to full height (ie so the page overall fills the 100% height) if there is not enough content or expanding longer if there is too much.

I have had several attempts and have not yet managed to work out how to do this. Any help would be greatly appreciated.

Many Thanks

05-08-2007, 03:32 PM
Maybe something like this: http://bonrouge.com/3c-hf-fluid-lc.php

05-08-2007, 04:05 PM
Hi - Thanks for that link... From that i found http://bonrouge.com/hcf-fluid.php which is more what i want.

However i have just been trying to work it into my style and on that page there is a <div id="content"> ... </div> called but no where can i see content defined so i'm finding it tricky to understand and make it work.

This is the one im working on currently: *link removed*. All i cannot do is make the box with 'content' in it flow to the full height as i want.

Thanks again.

05-08-2007, 07:14 PM
I have managed to sort this one out now. Thanks a lot for you're help and suggestion!