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

If you are not targeting Internet Explorer, you can position:absolute, box-sizing:border-box, and a lot of top, right, bottom, left, width, and height to create nice full screen layouts, and you have a lot of control over where elements are placed related to its container.

With border-box sizing, you don’t have to worry that border and padding will expand the box.

See this for an example: http://jsfiddle.net/thai/jtYDP/2/

It works in Firefox and Chrome.