jQuery Mobile: придерживайте нижний колонтитул внизу страницы

Question

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

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

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

Спасибо.

Answer 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/

Answer 2

Поскольку эта проблема устарела, многое изменилось.

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

data-position="fixed"

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

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

Answer 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%;
}

Answer 4

Фиксированные основы

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

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

Answer 5

jQm предложений:

• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/docs-footers.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fixed.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fullscreen.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/footer-persist-a.html

Ничего из этого не работает?

Answer 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;
}

Answer 7

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

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

Answer 8

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

Answer 9

Мне показалось, что этот скрипт работает ...

$(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');
        }
    });
}

Answer 10

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

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