Question

This is a fairly common problem to which I have yet to find an elegant solution:

I have a couple of block elements (let’s say 4) in a div. A very simple vertical layout.

The first two elements have fixed heights. The remaining two elements should split up the remaining space (i.e. body-height – first-element-height – second-element-height).

I know I can just calculate the sizes, but is there an elegant way to achieve this?

I’d like a solution that uses either native browser features (it’s an internal app only running on modern Firefox/Chrome versions, so bleeding edge is OK) or jQuery/jQuery UI (we already use it).

Answer 1

Use CSS3 flexbox layout: http://www.html5rocks.com/en/tutorials/flexbox/quick/