Jquery Mobile 粘性页脚 [英] Jquery Mobile Sticky Footer

问题描述

我想要 Jquery Mobile 中的页脚，它不是固定的，但始终位于页面底部.

像这样:http://ryanfait.com/sticky-footer/(但在 JQuery 中Mobile)，不像标准的 JQuery Mobile 固定页脚.

所以页脚应该出现在内容的末尾，或者屏幕的底部，以较低者为准.

关于如何解决这个问题的任何想法?

编辑:

基本问题是，我似乎无法让 data-role=content 的 div 真正占据屏幕的整个高度.

解决方案

基本上你只需要检查每个 data-role="content" 元素的高度，以确保与 header/使用视口中的垂直空间的页脚/内容区域.

例如:

$(document).on("pageshow", ".ui-page", function () {var $page = $(this),vSpace = $page.children('.ui-header').outerHeight() + $page.children('.ui-footer').outerHeight() + $page.children('.ui-content').height();if (vSpace < $(window).height()) {var vDiff = $(window).height() - $page.children('.ui-header').outerHeight() - $page.children('.ui-footer').outerHeight() - 30;//保证金减三十$page.children('.ui-content').height(vDiff);}});

每次导航到页面时都会运行此代码.

这是一个演示:http://jsfiddle.net/aBVtJ/1/>

I want a footer in Jquery Mobile, that is not fixed, but is always at the bottom of the page.

Like this: http://ryanfait.com/sticky-footer/ (but in JQuery Mobile), not like like the standard JQuery Mobile Fixed footers.

So the footer should appear at the end of the content, or the bottom of the screen, whichever is lower.

Any ideas on how to approach this?

Edit:

The basic problem, is that I seem unable to get the div with data-role=content to actually take up the full height of the screen.

解决方案

Basically you just need to check the height of each data-role="content" elements to make sure that with the header/footer/content-area that the vertical space in the view-port is used.

For example:

$(document).on("pageshow", ".ui-page", function () {
    var $page  = $(this),
        vSpace = $page.children('.ui-header').outerHeight() + $page.children('.ui-footer').outerHeight() + $page.children('.ui-content').height();

    if (vSpace < $(window).height()) {
        var vDiff = $(window).height() - $page.children('.ui-header').outerHeight() - $page.children('.ui-footer').outerHeight() - 30;//minus thirty for margin
        $page.children('.ui-content').height(vDiff);
    }
});​

This code will run each time a page is navigated-to.

Here is a demo: http://jsfiddle.net/aBVtJ/1/

这篇关于Jquery Mobile 粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！