Full height CSS layout /24 October 2009 @ 11am
The other day I needed to produce a web page which had a full height and width layout. It also needed header, left hand navigation and main content areas.
There would be no guarantee that the navigation or the main content would be taller than the screen so I needed to fix the layout to the height of the browser. I also wanted it to be cross browser compatible and sizeable by the user if it was used as a popup.
Lots of Google searches uncovered various different ways of getting a similar result to what I wanted, but most made use of the %100 heigh method. As I needed it to work in IE6/7/8 none of these solutions seemed to work.
Anyway, a lot of playing and a complete re-write later I think I have a pretty good solution that works in:
- IE
- Safari
- FireFox
Take a look at an example here.
This should give you the idea of what I was after. So because I could not find what I needed here is a template for anyone else who needs something like it.
No Comments Yet