Question

I am trying to get the content div on my page to fix itself when a user resizes the page. I have static divs on the top and bottom, making the content div the only one that resizes to flow with the page.

$(window).resize(function() {
    var height = $("#content").height();
    newheight = (height-136)+"px";
    $("#content").css("height",newheight);
});
function test() {
    var height = $("#content").height();
    newheight = (height-136)+"px";
    $("#content").css("height",newheight);
}

I am subtracting 136px from the height so that it fits inbetween my two static divs.

On page load, I run the test() function, and it resizes the content div like it should. But when I go to resize the window with the sizing handles it shrinks all the way down to the size of the content (only a couple words right now).

Here is the page itself live: spynsycle.com/ttr
(Ignore the ugly green, it is for debug purposes only)

Any thoughts?

Answer 1

As stated by @JaredFarris, you need to be taking $(window).height(). For example if you go to the site in Chrome or Firefox (with Firebug) and put the following in the console, it resizes perfectly as you want it to:

$(window).resize(function() {
    var height = $(window).height();
    newheight = (height-136)+"px";
    $("#content").css("height",newheight);
});