JQuery Mobile: придерживаться нижнего колонтитула до нижней части страницы

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

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

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

Спасибо.

Ответы

Ответ 1

Вы можете добавить это в свой файл css:

[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}

Таким образом, роль данных страницы теперь имеет высоту 100%, а нижний колонтитул находится в абсолютном положении.

Также Yappo написал отличный плагин, который вы можете найти здесь: jQuery Mobile в плагине iScroll http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

надеюсь, что вы нашли ответ!

Обновление ответа

Теперь вы можете использовать атрибут data-position="fixed", чтобы нижний колонтитул находился внизу.
Документы и демонстрации: http://view.jquerymobile.com/master/demos/toolbar-fixed/

Ответ 2

Так как эта проблема довольно старой, многое изменилось.

Теперь вы можете получить это поведение, добавив это в нижний колонтитул div

data-position="fixed"

Подробнее здесь: http://jquerymobile.com/test/docs/toolbars/bars-fixed.html

Также будьте осторожны, если вы используете ранее упомянутый CSS вместе с новым решением JQM, вы НЕ получите соответствующее поведение!

Ответ 3

В моем случае мне нужно было использовать что-то вроде этого, чтобы поддерживать нижний колонтитул внизу, если есть мало контента, но не плавает поверх всего, как обычно data-position="fixed", похоже, делает...

.ui-content
{
    margin-bottom:75px; /* Set this to whatever your footer size is... */
}

.ui-footer {
    position: absolute !important;
    bottom: 0;
    width: 100%;
}

Ответ 5

Следующие строки работают отлично...

var headerHeight = $( '#header' ).height();
var footerHeight = $( '#footer' ).height();
var footerTop = $( '#footer' ).offset().top;
var height = ( footerTop - ( headerHeight + footerHeight ) );
$( '#content' ).height( height );

Ответ 6

Я думал, что поделюсь своим решением только с CSS. Таким образом, вы можете избежать дополнительных накладных расходов на использование JS для этого.

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

Минимальная высота и высота тела и .ui-страницы необходимы для предотвращения перескакивания нижнего колонтитула вверх и вниз во время переходов.

Работает с последней версией JQM на данный момент, 1.4.0

body,
.ui-page {
    min-height:100% !important;
    height:auto !important;
}

.ui-content {
    margin-bottom:42px; /* HEIGHT OF YOUR FOOTER */
}

.ui-footer {
    position:absolute !important;
    width:100%;
    bottom:0;
}

Ответ 7

Исправлены основы

Чтобы включить это поведение в верхнем или нижнем колонтитуле, добавьте data-position="fixed" атрибут jQuery Mobile заголовка или нижнего колонтитула элемент.

<div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>

Ответ 8

Этот script, казалось, работал у меня...

$(function(){
    checkWindowHeight();
    $(document).bind('orientationchange',function(event){
        checkWindowHeight();
    })
});

function checkWindowHeight(){
        $('[data-role=content]').each(function(){
        var containerHeight = parseInt($(this).css('height'));
        var windowHeight = parseInt(window.innerHeight);
        if(containerHeight+118 < windowHeight){
            var newHeight = windowHeight-118;
            $(this).css('min-height', newHeight+'px');
        }
    });
}

Ответ 9

Добавление данных-position = "fixed" и добавление стиля ниже в css исправят проблему z-index: 1;

Ответ 10

http://ryanfait.com/sticky-footer/

Вы можете использовать это и использовать jQuery для обновления высоты элемента CSS, чтобы убедиться, что он остается на месте.