Resizing a div to fill the entire browser screen height

Update: Nowadays this effect can be archieved with pure css3, this method is still a viable option because it is _very_ simple to implement, and compatible with almost any new and old browser.

The Challenge

You want a div to fill the entire screen, but grow larger if your content does not fit on the page. This way you archieve a guaranteed minimum height. While this may seem very simple at first glance, a simple solution like setting height: 100%; does not work.

The css snippet below defines a wrap id to contain you content, and a JQuery snippet that will fire when the page is loaded. The javascript will check the size of the screen you page is vieuwed on, and compare it to the size of the document. If there is leftover screen real estate, the wrap will be expanded downwards to fill the screen. (or almost fill the screen, you can varuy the offeset at will.

If you content grows larger, the wrap will still expand to hold the additional content.

CSS Content

#wrap {
    -ms-box-shadow: 0 0 10px #333;
    -webkit-box-shadow: 0 0 10px #333;
    background-color: white;
    box-shadow: 0 0 10px #333;
    margin: 30px auto;
    width: 95%;
    padding: 30px;
}

JQuery resize div height script

<!-- Resize the wrap id to use the full screen height -->
<script type="text/javascript">
    $(document).ready(function() {
        var screenHeight = $(window).height();
        var currHeight = $("#wrap").height();
        if (currHeight < screenHeight - 120) {
            var newHeight = screenHeight - 120;
            newHeight = newHeight + "px";
            $("#wrap").css('height', newHeight);
        }
    });
</