jquery mobile и iphone - пустое пространство внизу страницы

Question

У меня есть мобильная веб-страница jquery. Он хорошо выглядит на настольных браузерах, а также на Android.

Но в сафари iphone у меня странное белое пространство внизу страницы. Это похоже на проблему с минимальной высотой .ui-страницы, потому что белое пространство имеет такую ​​высоту, как заголовок-бар + url-bar сафари.

Любые идеи?

EDIT: Я нашел проблему: Это было:

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. изменения

щ-страничный {мин-высота: «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();});