проблема позиционирования строки меню в нижней части мобильной страницы jQuery на iPhone

Question

Я сделал приложение, используя jQuery mobile, но теперь у меня огромная проблема. Я не могу сделать так, чтобы нижняя строка меню отображалась в нижней части страницы на iPhone. Работает на Nokia C6 и настольных браузерах. Я использовал position: absolute и bottom: 0. Когда я удаляю эти свойства, это делает его более жестким. Посмотреть изображения.

• Без свойств позиционирования
• Без свойств позиционирования
• С позиционированием
• С позиционированием

Answer 1

Если вы хотите, чтобы он отображался в нижней части экрана, вам нужно проверить, имеет ли элемент div, содержащий вашу страницу, хотя бы такую ​​же длину, как экран.Что-то вроде:

$('div[data-role="page"]').live('pageshow orientationchange', function () {
    var window_height = $(window).height();
    if ($(this).find('div[data-role="content"]').height() < window_height) {
        //window height minus the height of the header bar
        var th = (window_height - $(this).find('div[data-role="header"]')).height());

        //set page to height of window
        $(this).height(window_height);
        $(this).find('div[data-role="content"]').height(th);
    } else {
        //set page to height of window to auto so page does not cut-off at screen height
        $(this).height('auto');
        $(this).find('div[data-role="content"]').height('auto');
    }
});