Best technique to create fluid fullscreen layout with HTML & CSS & JS?

Question

What would be the best way to create fluid layout, which would fill the screen in both, horizontally and vertically? (The layout should be 100% height of the window, so no scrollbars should be visible nor no scrolling required)

I'm thinking purely as techniques go, since the elements of the layout will be changing.

Example could be something like this:

---------------------------------------
| HEADER  100% x 100px                |
---------------------------------------
|         |                 |         |
| SIDEBAR |      FILL       | SIDEBAR |
| 200px   |                 | 30%     |
| x 100%  |                 | x 100%  |
|         |                 |         |
|         |                 |         |
---------------------------------------

1. Header, that spans the whole screen,
2. Sidebars, that are floated to the edges, and which span the rest of the available height
3. And fill element, that fills the rest in horizontally and vertically

Currently it looks like this can only be achieved with JavaScript manipulation on window resize (as far as the height and fill goes).

But what if we add/remove elements, like add bar on top of the header, or take another sidebar away? The whole layout should still be filling the screen without any code or style changes. I'm somewhat stumped on how to approach this whole thing.

Penny for your thoughts Internet?

Answer 1

You don't have to have JavaScript - you can do it using HTML + CSS...

There are lots of three-column solutions here:

http://css-discuss.incutio.com/wiki/Three_Column_Layouts

Edit: Height Issue

If you just want fluid with entire height, here is a solution I've mocked up on JSFiddle...

http://jsfiddle.net/Sohnee/qJjyc/

Update:

Here is an example with a header, to demonstrate how you take it into account...

http://jsfiddle.net/qJjyc/1/