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

问题描述

我想要一个页脚在Jquery移动，这不是固定的，但总是在页面的底部。

像这样： http://ryanfait.com/sticky-footer/ （但在JQuery Mobile中），不像标准的JQuery Mobile Fixed Footers。

因此，页脚应出现在内容的末尾或屏幕底部，以较低者为准。

任何

基本问题，是我似乎无法得到的div与 data-role = content 实际占据屏幕的整个高度。

解决方案

基本上你只需要检查每个 data-role =content元素的高度，使用视口中垂直空间的页眉/页脚/内容区。

例如：

  $（document）.on（pageshow，.ui-page，function（）{
 var $ page = $（this），
 VSPACE = $ page.children（'UI头'）。outerHeight（）+ $ page.children（'UI尺'）。outerHeight（）+ $ page.children（'UI的内容'）。高度（）; 
 
如果（vSpace的&下; $（窗口）.height（））{
变种VDIFF = $（窗口）.height（） -  $ page.children（'UI头。 $ page.children（）outerHeight（） - ）.outerHeight（） -  30UI尺'; //零下30保证金
 $ page.children（）高度（UI的内容。。 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移动粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！