Resizing divs to fit screen vertically and play well with fixed height divs

Question

This might be a basic question, but I've been poking around for help and haven't been able to find a solution. I have four divs, represented by the areas marked x, a, b, and o. What I'm trying to achieve is to have area x and o be of fixed height, and areas a and b of variable height to fill up the rest of the screen. Is there a pure CSS solution to this problem, or do I need to turn to a JS solution?

xxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxx
aaaaaaaaaoooooooooo
aaaaaaaaaoooooooooo
aaaaaaaaabbbbbbbbbb
aaaaaaaaabbbbbbbbbb
aaaaaaaaabbbbbbbbbb

Answer 1

one way is to use a mixture of Absolute Positioning, using the four co-ordinates to find the top and bottom of the body , note: needn't be the body, if an element is positioned relatively and has height, AP will find the bottom if it too -

see an example in this: JSFiddle

Answer 2

Try to use this : position:absolute; and float to where ever you need.

You can also make a table with hidden border, and put your date where ever you want.

Answer 3

You could use faux(fake) columns css technique for A and B. And then place O inside manually and fixed as well as header X. No js needed.