JQuery Mobile Cordova (Phonegap), leaving blank space at the bottom of each page

Question

For each of my jQm pages, there is a blank space at the bottom of each page, and this adds scroll behavior for no reason. I added a screenshot.

This unnecessary scroll behavior causes me a lot of things.

I checked the page in firebug and it seems that jQm is adding "min-height: 213px;" to the page. Removing it in firebug seems to fix the problem, but I don't know where to find the source of the problem.

I cannot attach sample code here, but this is a clean jQm installation. Am I missing something, a simple thing?

I have tried the following other similar questions to no avail here. Most claim to add padding: 0 margin: 0, etc., but I think this is a jQm problem, since the code for the minimum height was in the html style element.

You can see the white square, it is clear that there is no scroll overlay content

Answer 1

Try dropping the viewport meta tag, it worked for me.

Answer 2

Yes, this is a problem with jQuery mobile. The style is set every time the viewport is resized.

For some applications this is probably necessary, but if that doesn't help you, just redefine it with an important rule in your CSS to get rid of side effects.