10

Jquery Mobile にフッターが必要です。これは固定ではありませんが、常にページの下部にあります。

このように: http://ryanfait.com/sticky-footer/ (ただし、JQuery Mobile 内)。標準の JQuery Mobile Fixed フッターとは異なります。

したがって、フッターはコンテンツの最後または画面の下部のどちらか低い方に表示する必要があります。

これにアプローチする方法についてのアイデアはありますか?

編集：

data-role=content基本的な問題は、実際に画面の高さ全体を占めるdiv を取得できないように見えることです。

4

3 に答える 3

5

主に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();
});
于 2012-10-10T21:04:35.487 に答える
4

基本的には、各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/

于 2012-09-11T20:54:31.753 に答える