iphone - jquery mobile 和 iphone - 页面底部的空白区域

Question

我有一个 jquery 移动网页。它在桌面浏览器和 Android 上看起来都不错。

但是在 iphone 的 safari 中，我在页面底部有一个奇怪的空白。看起来像是 .ui 页面的最小高度有问题，因为空白区域的高度与 safari 的标题栏 + 网址栏一样高。

有什么想法吗？

编辑:我发现问题是:

 html, body {
    overflow-x: hidden !important;
    position: relative !important;
 }

Answer 1

我希望这段代码可以解决您的问题。

<强> Example

// Get height of the document
var screen = $(document).height();

// Get height of the header
var header = $('[data-role=header]').height();

// Get height of the footer
var footer = $('[data-role=footer]').height();

// Simple calculation to get the remaining available height
var content = screen - header - footer;

// Change the height of the `content` div
$('[data-role=content]').css({'height': content });