Область содержимого JQuery-Mobile 100% высота между головой и ногой

Ответ 1

CSS position: fixed работает некорректно в мобильных браузерах. Мой опыт работы с Android и iOS-браузерами, и ни один из них не соответствует emt position: fixed (исключение - браузер iOS 5, но он все еще находится в бета-версии).

Вместо того, чтобы фиксировать элемент на экране и не перемещать его, когда пользователь прокручивается в мобильных браузерах, он обычно обрабатывается как position: absolute, и он перемещается при прокрутке страницы.

Также использование свойства CSS overflow не позволит прокручивать большинство мобильных устройств (iOS поддерживает его, но пользователь должен знать, использовать два пальца во время прокрутки в прокручиваемом div).

Однако вы можете использовать CSS, но помните, что вам нужно будет использовать position: absolute, или вы можете использовать JavaScript для установки высот элементов.

Вот решение jQuery Mobile с использованием JavaScript для установки высот элементов псевдо-страницы:

$(document).delegate('#page_name', 'pageshow', function () {
    var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height());
    $(this).height($(window).height()).find('[data-role="content"]').height(the_height);
});

Чтобы получить безупречный результат, вам нужно учитывать поведение адресной строки целевого устройства, потому что если вы хотите полноэкранную веб-страницу, вам нужно добавить высоту адресной строки в высоту страницы.

Ответ 2

Спасибо, Джаспер! Это очень помогло мне.

Мне пришлось много возиться, чтобы заставить это работать с несколькими верхними колонтитулами/колонтитулами, а также для учета строки url в ios. Я думал, что поделюсь своим решением для кого-то другого, имеющего эту проблему. Это работает для меня до сих пор в симуляторе ios, но мне хотелось бы услышать, как это работает на других устройствах.

/* detect device */
var ua = navigator.userAgent,
    iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
    ipad = ~ua.indexOf('iPad'),
    ios = iphone || ipad,
    android = ~ua.indexOf('Android');


$(document).delegate('#the_page', 'pageshow', function () {
    var $page = $(this),
        $target = $(this).find('.fullHeight'),
        t_padding = parseInt($target.css('padding-top'))
                    + parseInt($target.css('padding-bottom')),
        w_height = (ios)? screen.height-65: $(window).height();     // "-65" is to compensate for url bar. Any better ideas?
        headFootHeight = 0;

    // Get total height for all headers and footers on page
    $page.find('[data-role="footer"], [data-role="header"]').each(function() {
        var myTotalHeight = $(this).height()
                            + parseInt( $(this).css('padding-top') )
                            + parseInt( $(this).css('padding-bottom') );
        headFootHeight += myTotalHeight;
    });

    var the_height = (w_height - headFootHeight);           

    $page
     .height(w_height)
     .find('.fullHeight')
     .height(the_height - t_padding);
}); 

Этот script устанавливает высоту 100% для ".fullHeight" вместо [data-role = content], чтобы обеспечить большую гибкость, но вы можете просто добавить класс fullHeight к вашему [data-role = content] элемент.

Одна проблема, которую я все еще имею, - это компенсация строки url в ios и поиск высоты окна, которая работает на всех устройствах. Есть идеи по этому поводу?

Ответ 3

CSS:

footer {
            display: block;
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            height: 50px;
            background-color: #333;
            overflow: hidden;
            z-index:1000;
            -webkit-transform: translateZ(0);
            opacity:.9;
        }

    header{
        display:block;
        position: fixed;
        left:0;
        right:0;
        top:0;
        height:50px;
        overflow: hidden;
    }

    section{
        display:block;
        position:fixed;
        left:0;
        top:50px;
        bottom:50px;
        right:0;
        overflow-y: auto;
    }

    nav{
        display:block;
        height:100%;
        -webkit-backface-visibility: hidden;
    }

    .body{
        overflow-y: hidden;
    }
    .bar {
border: 1px solid       #2A2A2A;
background:             #111111;
color:                  #ffffff;
font-weight: bold;
text-shadow: 0 -1px 1px #000000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #3c3c3c, #111); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient(top, #3c3c3c, #111); /* FF3.6 */
background-image:     -ms-linear-gradient(top, #3c3c3c, #111); /* IE10 */
background-image:      -o-linear-gradient(top, #3c3c3c, #111); /* Opera 11.10+ */
background-image:         linear-gradient(top, #3c3c3c, #111);
  }

нужен только html:

  <header class="bar" id="AllHead"></header>

  <div data-role="content" class="content" id="home"><section><nav></nav></section></div><!-- /content -->

  <footer class="bar" id="allFoot"></footer>

 </div><!-- /page -->

вы можете установить все нужные элементы внутри нижнего колонтитула и нижнюю панель навигации это всегда будет выглядеть правильно, независимо от того, что произойдет, и это не будет вспыхивать каждый раз, когда вы что-то касаетесь. надеюсь, что это поможет