jquery-mobile - jQuery Mobile 背景不是全高

Question

当我在 iphone 上加载我的 jQuery Mobile 页面时，一些页面超出了初始视口。初始视口之外的空间一开始是白色的，而不是应有的灰色。我尝试使用这行代码将高度设置为 100%：[data-role=page]{height: 100% !important; position:relative !important;}但这仍然不能解决问题。

Answer 1

我的 JQM 页面总是有同样的问题。我用它来使我的页面高度为 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);
});

希望这可以帮助。

Answer 2

首先，不要滥用!important. 要诊断 CSS 出了什么问题，您可以使用 Firefox 中的 Firebug / Chrome 中的开发者控制台。（Safari & IE 也有类似的东西）。一些 CSS 可能被覆盖，或者层可能重叠。

如果没有您的 HTML 代码和 jQuery 脚本，我真的无能为力，但通常，要使内容达到全高，您必须将htmlCSS 和bodyCSS 设置为使用height: 100%;.