jQuery Mobile：将页脚置于页面底部

有什么方法可以牢记jQuery Mobile框架的操作方式来固定页面，以便页脚始终与页面底部对齐-不管高度如何。

从目前的角度来看，jQuery页面的高度将发生变化，尤其是当设备从纵向旋转为横向时，因此解决方案必须考虑到这一点。

只是为了澄清-我不需要页脚位于视口的底部，而只是为了使默认页面高度不低于视口高度而工作。

谢谢。

您可以在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/

由于这个问题有点陈旧，所以很多事情已经改变。

现在，您可以通过将其添加到页脚div中来获得此行为

data-position="fixed"

此处提供更多信息：http : //jquerymobile.com/test/docs/toolbars/bars-fixed.html

还要注意，如果将前面提到的CSS与新的JQM解决方案一起使用，将不会得到适当的行为！

就我而言，我需要使用类似这样的方法来在没有太多内容的情况下将页脚固定在底部，但又不能像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%;
}

固定基础

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

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

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

这些都不起作用吗？

以下几行工作得很好...

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

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

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

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

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

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

您可以使用此方法并使用jQuery更新元素的css高度，以确保其保持在原位。