Jquery Mobile 粘滞页脚答案

【问题标题】：Jquery Mobile Sticky FooterJquery Mobile 粘滞页脚
【发布时间】：2012-09-04 19:33:09
【问题描述】：

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

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

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

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

编辑：

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

【问题讨论】：

上面提到的有什么问题？它在我的 Android 手机上运行良好。
我无法让该技术在 JQuery Mobile 页面中发挥作用。
我从未使用过 jQuery Mobile，所以可能是一个愚蠢的问题：您确实创建了自己的 HTML 页面和 CSS 来配合页面吗？还是一切都生成了？
您创建自己的 HTML 页面，但问题是，在给定的 HTML 页面中存在多个可显示页面。见这里：jquerymobile.com/demos/1.1.1/docs/pages/multipage-template.html
@Jasper 他追求的不是固定的，而是到页面的末尾，是内容所在或屏幕结束的地方（就像固定的一样）。

标签： css jquery-mobile sticky-footer

【解决方案1】：

我主要使用 CSS 解决了这个问题。与公认答案相比，它的优点是它将处理页面显示后页面大小发生变化的情况（例如浏览器调整大小、方向更改，或者更简单的情况，如可折叠/手风琴部分）。它的 Javascript 代码也少得多，也没有布局数学。

CSS：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

[data-role=page] {
  min-height: 100%;
  position: relative;
}

[data-role=content] {
  padding-bottom: 40px; /* based on how tall your footer is and how much gap you want */
}

[data-role=footer] {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px /* this can be configurable, or omitted, as long as the above padding-bottom is at least as much as the height of the footer is */
}

绝对页脚导致 jQuery Mobile 页面转换显示闪烁的页脚（尤其是“幻灯片”转换），所以我添加了少量的 Javascript：

$(document).live( 'pagebeforechange', function() {
  // hide footer
  $('[data-role=footer]').hide();
});

$(document).live( 'pagechange', function() {
  // show footer
  $('[data-role=footer]').show();
});

【讨论】：

我明天试一试，我非常偏爱不使用 javascript 来解决这个问题，现在我听了一大堆不同的事件，并对此进行布局数学，为了正确响应方向变化、窗口大小调整等。
这对我很有用。我只是使用了 margin-bottom 而不是 padding-bottom，所以我不必增加我的内容大小。
我无法让这个 CSS sn-p 工作。可能是因为 data-role="content" 已“自 1.4.0 起已弃用，并将在 1.5.0 中删除。”(api.jquerymobile.com/data-attribute)。

【解决方案2】：

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

例如：

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

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

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

【讨论】：

这看起来会起作用，但是直到明天我才能访问实际代码来测试它
我必须做的唯一改变是使用 31 而不是 30，以避免在某些情况下出现不必要的滚动条。
另外，我在此方法之前将内容的高度设置为auto，并且在桌面浏览器的情况下，在调整窗口大小时调用了相同的函数。如果有人对我的代码感兴趣，我可以在这里发布。
你可能想在$(window).resize()和$("img").load()上运行类似的东西

【解决方案3】：

查看this SO:

jQuery Mobile 有一个支持固定或“粘性”位置的原生页脚。示例和文档可以在http://view.jquerymobile.com/1.3.1/dist/demos/widgets/fixed-toolbars/

找到

【讨论】：

这是真正的解决方案