jQuery Mobile background not full height

问题

When I load my jQuery Mobile page on an iphone, some of the page extends out of the initial viewport. The space that is out of the initial viewport to begin with is white, not gray which it should be. I've attempted to set the height to 100% using this line of code: [data-role=page]{height: 100% !important; position:relative !important;} however this still does not do the trick.

回答1:

First, don't misuse !important. To diagnose what's wrong with the CSS, you can use Firebug in Firefox / Developer Console in Chrome. ( Safari & IE have similar things ). Some CSS may be overridden, or layers maybe overlapped.

Without your HTML codes & jQuery scripts, I can't really help on this, but normally, to make the content to full height, you have to set html CSS and body CSS to use height: 100%;.

回答2:

I always have the same problem with my JQM pages. I use that to make my page height 100%:

$(document).delegate('#yourPage', 'pageshow', function () {
    var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() -   $(this).find('[data-role="footer"]').height());
    $(this).height($(window).height()).find('[data-role="content"]').height(the_height);
});

Hope this helps.

来源：https://stackoverflow.com/questions/11857294/jquery-mobile-background-not-full-height