Full height and full width CSS layout

Question

I am looking for a way to create a CSS-only (no JavaScript) layout with 5 regions that looks like this:

   ┌────────────────────┐
   │          H         │
   ├─         


        

Answer 1

The reason you can't find any CSS to do this is because the CSS spec doesn't really allow you to meet all these conditions without using at least one of the options that you don't want to use.

The Holy Grail liquid layout is 100% CSS but does not meet your height criteria on its own: http://www.alistapart.com/articles/holygrail/

You can fake the height criteria with the footer by using this method: http://www.themaninblue.com/writing/perspective/2005/08/29/

This 24Ways article has a full-height column method using absolute positioning which solves a few of your problems but creates a new one in that one of your columns is always going to overflow if the content expands: http://24ways.org/2008/absolute-columns

You will likely need to combine a number of methods to get something workable to your spec. I'd personally just use jquery because life is too short for messing around with CSS like this, but if you're dead-set on avoiding it, then prepare yourself for a lot of hacking around.