web-dev-qa-db-ja.com

jQuery Mobile：フッターをページの下部に貼り付ける

JQuery Mobileフレームワークが動作する方法を念頭に置いて、フッターが常に高さに関わらずページの下部に揃うようにページを修正する方法はありますか。

特に、デバイスを縦向きから横向きに回転させると、jQueryページの高さが変化するため、ソリューションではこれを考慮する必要があります。

明確にするために-フッターをビューポートの下部に配置する必要はありません。デフォルトのページの高さがビューポートの高さを下回らないように機能するだけです。

ありがとう。

cssjquery-mobile
70
Sergio

これをcssファイルに追加できます：

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

したがって、ページデータロールの高さは100％になり、フッターは絶対位置になります。

また、Yappoは、ここで見つけることができる優れたプラグインを書いています：jQuery Mobile in a iScroll plugin http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

答えを見つけてください！

回答の更新

data-position="fixed"属性を使用して、フッター要素を下部に保持できるようになりました。
ドキュメントとデモ： http://view.jquerymobile.com/master/demos/toolbar-fixed/

113
Philip

この問題は古いものなので、多くのことが変わっています。

これをフッターdivに追加すると、この動作を取得できます

data-position="fixed"

詳細はこちら： http://jquerymobile.com/test/docs/toolbars/bars-fixed.html

また、前述のCSSを新しいJQMソリューションと一緒に使用すると、適切な動作が得られないことに注意してください！

60
Nicklas Gnejs Eriksson

私の場合、コンテンツがあまりない場合でもフッターを下に固定するためにこのようなものを使用する必要がありましたが、 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%;
}
15
jocull

固定基本

ヘッダーまたはフッターでこの動作を有効にするには、data-position="fixed"属性をjQuery Mobileヘッダーまたはフッター要素に。

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

jQmが提供するもの：

これらはどれも機能しませんか？

3
Phill Pafford

次の行は問題なく動作します...

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

ここでCSSのみのソリューションを共有すると思いました。これにより、このためにJSを使用する余分なオーバーヘッドを回避できます。

これは固定位置フッターではありません。ページコンテンツが画面よりも高い場合、フッターはオフスクリーンになります。私はこのように良く見えると思います。

トランジション中にフッターが上下にジャンプするのを防ぐには、bodyと.ui-pageの最小の高さと高さが必要です。

現在の最新の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;
}
2
ArcadeRenegade

Data-position = "fixed"を追加し、CSSに以下のスタイルを追加すると、z-indexの問題が修正されます。

1
vinod

このスクリプトは私にはうまくいったようです...

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

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

おそらくこれを使用し、jQueryを使用して要素のCSSの高さを更新し、要素が所定の位置にあることを確認できます。

0
Devin