Высота мобильной страницы jQuery

Question

В течение последнего дня я пытался выяснить, как изменить стиль минимальной высоты на мобильной странице jQuery при просмотре в мобильном сафари. Я пробовал встроенные стили, переопределяя стили пользовательского интерфейса, и мне еще не удалось найти способ переопределить высоту data-role = "page". В идеале, если «содержание» страницы меньше высоты «страницы», я бы хотел, чтобы высота «страницы» автоматически подстраивалась под «содержание». Я приложил иллюстрацию, чтобы лучше объяснить проблему.

<div data-role="page">
     <div data-role="header">
             Header Elements
     </div>
     <div data-role="content" class="homeNav">
            <ul data-role="listview" data-inset="false" data-filter="false">
                <li><a href="expertise.html">Expertise</a></li>
                <li><a href="greatesthits.html">Greatest Hits</a></li>
                <li><a href="profile.html">Profile</a></li>
                <li><a href="mindset.html">Mindset</a></li>
                <li><a href="connect.html">Connect</a></li>
             </ul>  
     </div><!-- /content -->

     <div data-role="footer" data-position="fixed">
             Footer elements
     </div><!-- /footer -->
</div><!-- /page -->

Answer 1

min-height элемента data-role="page" устанавливается с помощью JavaScript в обработчике событий resize для объекта window.Вы можете создать свой собственный JavaScript, который изменяет размеры страницы по-разному:

$(function () {
    $(window).bind('resize', function (event) {
        var content_height = $.mobile.activePage.children('[data-role="content"]').height(),
            header_height  = $.mobile.activePage.children('[data-role="header"]').height(),
            footer_height  = $.mobile.activePage.children('[data-role="footer"]').height(),
            window_height  = $(this).height();

        if (content_height < (window_height - header_height - footer_height)) {
            $.mobile.activePage.css('min-height', (content_height + header_height + footer_height));
            setTimeout(function () {
                $.mobile.activePage.children('[data-role="footer"]').css('top', 0);
            }, 500);
        }
        event.stopImmediatePropagation();
    }).trigger('resize');
});

Вот демонстрационная версия: http://jsfiddle.net/sAs5z/1/

Обратите внимание на setTimeout, используемый для установки fixed-position-footer;продолжительность тайм-аута, вероятно, может быть уменьшена.Это используется, потому что jQuery Mobile Framework перенес fixed-position-footer обратно в конец страницы.Пример этого можно увидеть здесь: http://jsfiddle.net/sAs5z/

Еще одно примечание, вы можете захотеть только переместить элемент fixed-position-footer и оставить свойство страницы min-height таким же;это позволит градиенту страницы покрыть весь экран, но нижний колонтитул не будет иметь никакого пространства между ним и содержимым.Вот демонстрация этого метода: http://jsfiddle.net/sAs5z/2/

Answer 2

Старый билет, но у меня есть решение, которое я предпочитаю больше. Он специально освобождает событие resize с помощью некоторого взлома внутренних компонентов jQuery. Мне не нравится решение Джаспера, потому что оно зависит от запуска одного события, чтобы блокировать другое, и события в теории никогда не должны знать друг о друге / вы никогда не должны зависеть от порядка, в котором происходят события.

$(function() {
    // WARNING: Extremely hacky code ahead. jQuery mobile automatically
    // sets the current "page" height on page resize. We need to unbind the
    // resize function ONLY and reset all pages back to auto min-height.
    // This is specific to jquery 1.8

    // First reset all pages to normal
    $('[data-role="page"]').css('min-height', 'auto');

    // Is this the function we want to unbind?
    var check = function(func) {
        var f = func.toLocaleString ? func.toLocaleString() : func.toString();
        // func.name will catch unminified jquery mobile. otherwise see if
        // the function body contains two very suspect strings
        if(func.name === 'resetActivePageHeight' || (f.indexOf('padding-top') > -1 && f.indexOf('min-height'))) {
            return true;
        }
    };

    // First try to unbind the document pageshow event
    try {
        // This is a hack in jquery 1.8 to get events bound to a specific node
        var dHandlers = $._data(document).events.pageshow;

        for(x = 0; x < dHandlers.length; x++) {
            if(check(dHandlers[x].handler)) {
                $(document).unbind('pageshow', dHandlers[x]);
                break;
            }
        }
    } catch(e) {}

    // Then try to unbind the window handler
    try {
        var wHandlers = $._data(window).events.throttledresize;

        for(x = 0; x < wHandlers.length; x++) {
            if(check(wHandlers[x].handler)) {
                $(window).unbind('throttledresize', wHandlers[x]);
                break;
            }
        }
    } catch(e) {}
});

Answer 3

Я столкнулся с той же проблемой при отображении всплывающего окна с наложением $ .mobile.resetActivePageHeight ();сделал трюк для меня.Thanx!