jQuery Forum

I actually had this same need when I was working on an image gallery.  Here's the code I use to calculate the max height and width available for a <div> on the page.

Warning: this has not been bullet proofed and will probably mess with your app if you use this on multiple pages pulled in with ajax.  It's written for my specific needs so you might have to tweak it a bit.  Put a CSS background color on #scrollpane to see it change size on different devices or when resizing the app.

1. $('body').live('pageshow', init);
   var me = null;
   
   function init(event, ui)
   {
       if(me == null)
       {
           me = event.target;
       }
   
       if(me == event.target)
       {
           $(window).bind('resize', resizeScrollPane);
           setTimeout('resizeScrollPane()', 10);
           $('body').bind('pagehide', unload);
       }
   }
   
   function unload()
   {
       $(window).unbind('resize', resizeScrollPane);
       $('body').unbind('pagehide', unload);
   }
   
   function resizeScrollPane()
   {
       var scrollpane = $("#scrollpane");
       var header = $.mobile.activePage.children("div[data-role='header']");
       var content = $.mobile.activePage.children("div[data-role='content']");
   
       scrollpane.hide();
       scrollpane.height(
           $.mobile.activePage.innerHeight()
           - header.outerHeight()
           - content.outerHeight()
           - 6
       );
   
       scrollpane.width(
           $.mobile.activePage.width()
           - $.mobile.activePage.css('padding-left')
           - $.mobile.activePage.css('padding-right')
       );
       scrollpane.show();
   
       var event = jQuery.Event('stagesizechanged');
       event.height = scrollpane.height();
       event.width = scrollpane.width();
       $('body').trigger(event);
   }