I know this is possible, but it is driving me mad.

For example's sake, I have just 2 divs inside the body tag of a page.

Both divs are to scale the full width of the body

The first div is just 100px heigh

The second div is to be placed underneath and consumes the remaining height of the body.

So basically we have 2 rows, a) is 100px heigh, and b) is (body_height - 100px).

Do I have to resort to using Javascript to get this working cross browser? or will CSS suffice?

Can anyone offer a code example that works cross browser? I have looked for this online, but can't find exactly what I'm looking for.