jQuery Forum

I'll assume you're starting with a standard jquery mobile 1.1.0, and have your 

To start, we need some CSS for a div we'll call "fillme":

This just sets the background color to black, so you can see the size clearly in this demo.

I'm going to demonstrate on a page with a header, but no footer, so the HTML for the jQuery Mobile page should look something like this:

At this point, we've got a div with no defined width, height, or content, but will have a black background as soon as those are provided.

We'll start by waiting until the window is loaded and ready:

We're going to want this div to resize when the screen dimensions change, so we start by binding a resize event to the window:

First, make sure we're at the top of the page:

Next, get the height of the screen, without the browser chrome:

That is the total height of the screen, however, including things like the header, so let's get the height of the first page's header (if you used a footer, you'd also take the height of the footer into consideration in a similar manner):

We'll subtract that from the total height of the window (which you'd also do for the footer, if you had one). We also need to compensate for the 15-pixel padding at the top AND the bottom, so we'll subtract another 30 pixels after that:

Since there's less to worry about concerning the width, we just use the document width, and adjust for the 15-pixel padding on the left and the right:

Finally, we set the width of the "fillme" div to be the height and width we've determined for our window, and then close the window resize event listener:

Now, this is fine for desktop and laptop browsers, but mobile devices register an orientationchange event, so we'll create an event listener for that:

Orientation changes often create that annoying whitespace at the bottom, so we'll deal with that via a tip I learned from:

Next, trigger the resize event, so everything gets arranged properly, and make sure the window is scrolled to the top:

Finally, close the orientationevent listener, trigger the orientationchange event, to help remove the whitespace at the bottom, and close the window load function:

That's it!

Now, whenever you resize your browser window or rotate your mobile device, you should see a big black rectangle adjust itself to the visible and usable section of the content area!

You can now use this div as a starting point to keep things visible. For a simple idea, you might decide to set this div's overflow to "hidden", so anything outside that div isn't placed on the screen.

Alternatively, you could use it as a reference to keep elements sized appropriately in a window.

For example, I used it to create a chessboard that resizes itself. I simply looked at which of the 2 dimensions had a smaller pixel size, the height or the width, and made each square 1/8th that size. By having this re-drawn in the resize event listener, I get an adjustable chessboard!

Below is the resizable div's full jquery mobile/javascript code with comments for cutting and pasting purposes: