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

jQuery Mobile: Stick footer to bottom of page

提问by Sergio

Is there any way, bearing in mind the way the jQuery Mobile framework operates, to fix the page so that the footer always aligns with the bottom of the page - no matter the height.

有什么办法，牢记 jQuery Mobile 框架的运行方式，来修复页面，使页脚始终与页面底部对齐 - 无论高度如何。

As it stands the height of a jQuery page will change, especially as devices are rotated portrait to landscape, so the solution would have to take this into account.

事实上，jQuery 页面的高度会发生变化，特别是当设备从纵向旋转到横向时，因此解决方案必须考虑到这一点。

Just to clarify - I don't need the footer to be at the bottom of viewport, just working so that the default page height doesn't drop below the viewport height.

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

Thanks.

谢谢。

回答by Philip

You can add this in your css file:

您可以将其添加到您的 css 文件中：

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

So the page data-role now have 100% height, and footer is in absolute position.

所以页面数据角色现在有 100% 的高度，并且页脚处于绝对位置。

Also Yappo have wrote an excellent plugin that you can find here: jQuery Mobile in a iScroll plugin http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

Yappo 还编写了一个出色的插件，您可以在这里找到：iScroll 插件中的 jQuery Mobile http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

hope you found the answer!

希望你找到了答案！

An answer update

答案更新

You can now use the data-position="fixed"attribute to keep your footer element on the bottom.
Docs and demos: http://view.jquerymobile.com/master/demos/toolbar-fixed/

您现在可以使用该data-position="fixed"属性将页脚元素保持在底部。
文档和演示：http: //view.jquerymobile.com/master/demos/toolbar-fixed/

回答by Nicklas Gnejs Eriksson

Since this issue is kind of old a lot of things have changed.

由于这个问题有点老了，很多事情都发生了变化。

You can now get this behavior by adding this to the footer div

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

data-position="fixed"

More info here: http://jquerymobile.com/test/docs/toolbars/bars-fixed.html

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

Also beware, if you use the previously mentioned CSS together with the new JQM solution you will NOT get the appropriate behavior!

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

回答by jocull

In my case, I needed to use something like this to keep the footer pinned down at the bottom if there is not much content, but not floating on top of everything constantly like data-position="fixed"seems to do...

在我的情况下，如果内容不多，我需要使用这样的东西来将页脚固定在底部，但不会像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%;
}

回答by CONvid19

Fixed basics

To enable this behavior on a header or footer, add the data-position="fixed"attribute to a jQuery Mobile header or footer element.

固定基础

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

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

回答by Phill Pafford

jQm offers:

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

• 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

None of these work?

这些都不行吗？

回答by ArcadeRenegade

I thought I'd share my CSS only solution here. This way you can avoid the extra overhead of using JS for this.

我想我会在这里分享我的 CSS 唯一解决方案。这样您就可以避免为此使用 JS 的额外开销。

This isn't a fixed position footer. The footer will be offscreen if the page content is taller than the screen. I think it looks better this way.

这不是固定位置的页脚。如果页面内容比屏幕高，则页脚将在屏幕外。我认为这样看起来更好。

The body and .ui-page min-height and height are necessary to prevent the footer from jumping up and down during transitions.

body 和 .ui-page min-height 和 height 是防止页脚在转换过程中上下跳跃所必需的。

Works with the latest JQM version as of now, 1.4.0

与目前最新的 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;
}

回答by Eskali

The following lines work just fine...

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

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

回答by vinod

Adding the data-position="fixed" and adding the below style in the css will fix the issue z-index: 1;

添加 data-position="fixed" 并在 css 中添加以下样式将解决 z-index: 1;

回答by David Hedges

This script seemed to work for me...

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

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

回答by Devin

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

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

You could possibly use this and use jQuery to update the css height of the elements to make sure it stays in place.

您可以使用它并使用 jQuery 更新元素的 css 高度以确保它保持原位。