CSS or jQuery: Make last div fill the rest of the screen height

Question

I have a set of 3 elements that need to be seen on the initial screen, while the stuff in the body below those elements, needs to be below the bottom of the initial screen, but the user still needs to be able to scroll to everything after the load. The perfect example of this is the landing page on dropbox.com (when logged out).

No matter how much the user zooms out, the elements below that lines stay below it, and are not seen until the user scrolls down. I am looking for a good CSS or jQuery solution.

I have seen this but I cannot simply make those 3 elements absolute.

The best way for me to do this, would be to extend the 3rd div's height to the bottom of the initial screen, how can I do this?

EDIT: I have about 6 divs total, and I only want the first 3 to be visible while the rest must be below the initial screen bounds.

EDIT: here is a picture of the div layout:

Answer 1

$(document).ready(function(){
    var w = $(window).height(); //Gives height of whole window

    // then set css heights based on window height
});

More information about how the 3 divs are going to be laid out will help!

You can also do it incase they resize the window.

$(window).resize(function(){
    var w = $(window).height(); //Gives new Height of window

    //Then set css heights again
});