Question

我有一个jquery移动网页。它在桌面浏览器上看起来很好，而且在android上也很好。

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

有什么想法吗？

编辑：我发现了问题：它是：

 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 });

Answer 2

问题在于min.css中的min-height属性。变化

ui-page {min-height：“400px”}

希望它有效:)

Answer 3

很抱歉发布一个旧问题，但我最近遇到了这个问题。

原来这个问题是由一些浏览器引起的，人们提供隐藏地址栏的JS函数。

，例如

function hideAddressBar(){
  if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
    document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
  setTimeout(window.scrollTo(1,1),0);
}
window.addEventListener("load",function(){hideAddressBar();});
window.addEventListener("orientationchange",function(){hideAddressBar();});

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

3 个答案: