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也写了一个很棒的插件，你可以在这里找到： iScroll插件中的jQuery Mobile 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

Fixed basics

要在页眉或页脚上启用此行为，请添加   data-position="fixed"属性为jQuery Mobile页眉或页脚   元件。

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

Answer 5

jQm提供：

这些都不起作用吗？

Answer 6

以下几行正常......

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

Answer 7

我以为我会在这里分享我的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;
}

Answer 8

这个脚本似乎对我有用......

$(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 9

添加data-position =“fixed”并在css中添加以下样式将解决问题z-index：1;

Answer 10

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

你可以使用它并使用jQuery来更新元素的css高度，以确保它保持不变。

jQuery Mobile：将页脚粘贴到页面底部

10 个答案: