Full Screen Height

[trevor4370]

I have been trying to design my first fully CSS template (being a table man from way back). I have 2 columns, left hand menu and main area plus header.

Header is OK, and I have found how to keep the footer to the bottom of the page. The next thing (and I have tired/read almost everything in the last three days on this subject - none worked for me) is how do you get the DIV (container) to stretch the full height of the screen.

Pictures paint a thousand words...

The first image is how it is now ...... you can see where the menu and main areas are not reachng the bottom.

http://www.thingsonline.com.au/css/css1.png

The 2nd is how I would like it to look (both the menu and main area stretch 100% high) .... someone please help, or point me to where i can find out (maybe a hidden thread I missed in this forum).

http://www.thingsonline.com.au/css/css2.png

Thank

Trevor

[mwa103]

To get the 2 column css layout, you will have to combine these two page layouts:

Get 2 columns:
http://www.maxdesign.com.au/presentation/two-columns/final.htm

Get fullscreen height with footer and header:
http://www.cssplay.co.uk/layouts/bodyfix.html

Just take a look at the page source for these 2 pages. The first one has a tutorial associated with it, but I think you already have the 2 column part down. Just add the css and html for 2 col into the content section of the fullscreen height. Hope this helps.

-Mike