Here's some handy code that might help:
- winhigh = $.mobile.getScreenHeight();
- headhigh = $('[data-role="header"]').first().outerHeight();
- winhigh = winhigh - headhigh - 30;
In line 1, winhigh is set to the available visible screen height, minus any space taken up by any browser chrome.
In line 2, headhigh is set to the total height of the page's header. If you have a footer, you'll want to get it's height in the same way.
In line 3, winhigh is adjusted by subtracting the height of the header (you'll also want to subtract the height of the footer if you have one). The "-30" is to account for the 15-pixel padding at the top and bottom of the screen.
After this, the winhigh variable will contain the total visible space of the content area in pixels that you can use.
Width is even simpler:
- winwide = $(document).width();
- winwide = winwide - 30;
Just grab the width, subtract the 30 pixels for the left and right 15-pixel padding of the content, and you're set to go.