Using JQuery to Resize a Div to Match Window Dimensions

Here is the code that DOES NOT work:

(The behavior is that the div doesn't change size. Note that I am also using JScrollPane on t开发者_Go百科his div. [I mean the javascript library and not the Swing component]).

function resizeDivs()
{
    alert( "BEFORE\n#page width, height: " + $('#page').css( "width" ) + "," + $('#page').css( "height" ) );
    alert( "window width, height: " + $(window).width() + "," + $(window).height() );

    $('#page').css( "width", $(window).width() );
    $('#page').css( "height", $(window).height() );

    alert( "AFTER\n#page width, height: " + $('#page').css( "width" ) + "," + $('#page').css( "height" ) ); 
}

I don't see why your code shouldn't work. You can see the very same thing work fine right here on Stack Overflow:

$("#question-header").css("width", $(window).width());

I suspect that your code is getting called before the resize event has fully completed in the browser. Perhaps you could work around this using a timer, putting this wherever your resize callback is:

setTimeout('resizeDivs()', 10);

I'd also check for other CSS/layout issues that could be interfering.