jQuery мобильного телефона: вставьте нижний колонтитул в нижней части страницы

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

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

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

спасибо.

10 70
css jquery-mobile

10 ответов:

вы можете добавить это в свой 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/

112

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

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

data-position="fixed"

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

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

60

в моем случае мне нужно было использовать что-то вроде этого, чтобы держать нижний колонтитул прижатым внизу, если там не так много контента, но не плавает поверх всего постоянно, как 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%;
}
15

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

нет из этих работ?

3

основные основы

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

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

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

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

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

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

тело и .ui-page min-height и height необходимы для предотвращения перехода нижнего колонтитула вверх и вниз во время переходов.

работает с последней версией 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;
}
2

этот сценарий, казалось, работал для меня...

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

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

1

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

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

0