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

我有一个jquery移动网页。它在桌面浏览器和android上看起来不错。jquery mobile和iphone - 页面底部的空白处

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

任何想法？

编辑：我发现这个问题：它是：

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

来源

2013-03-28 bernhardh

它与'UI-content'高度来完成。它发生在'data-role = content'具有与data-role = page'不同的'data-theme'时。 – Omar

我希望这个代码解决您的问题。

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

来源

2013-03-28 14:51:09 Omar

不，不是真的..也许你可以看看它：http：//www.urlgone.com/25e111/ – bernhardh

它看起来像加载器div造成它。试试这个'$（'div.ui-loader'）。hide（）;'或'remove（）;'。但先尝试'hide（）;'。 @leftjustified – Omar

这是完美的工作。 –

问题是与在min.css最小高度属性。变化

UI页面{最小高度：“400像素”}

希望工程:)

来源

2013-04-30 11:41:30

对不起张贴在一个老问题，但最近我坚持这一点。

原来，这个问题是由某些浏览器通过人们提供的隐藏地址栏的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();});

来源

2015-12-02 16:21:23 Ryan

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

回答

相关问题