3

サイトに固定フッターを実装しようとしています。

私の問題は、ページをスクロールすると、フッターがコンテンツと重なってしまうことです。スクロールが終わると一番下に戻ります。これは標準的な動作ですか？

このリンクを確認しました。デスクトップブラウザで動作します。すなわち。フッターはスクロールしても固定されたままです。ただし、モバイル（Android）では、ページとともにスクロールします。本当に直せますか？

編集：HTMLが追加されました

<div data-role="footer" data-iconpos="left"  data-id="jefooter" data-theme="b" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
        <ul>
            <li>
                <a href="/welcome" data-icon="jehome" data-iconpos="notext" data-direction="reverse" data-ajax="false">Home</a>
            </li>
            <li>
                <a href="/mobile/users/settings" id="user_auth" data-icon="jesettings" data-iconpos="notext" data-transition="fade" data-ajax="false">My Settings</a>
            </li>
            <li>
                <a href="/mobile/help" data-icon="jehelp" data-iconpos="notext" data-transition="fade" data-ajax="false">Help</a>
            </li>
        </ul>
    </div>
</div>

ページは m.qa.hungryzone.com で見ることができます

編集2：

Android のバージョンは 2.3.5 です

4

3 に答える 3

8

交換で直りました

<meta name="viewport" content="width=device-width, initial-scale=1" />

と

<meta name="viewport" content="user-scalable=no,width=device-width" />

htmlのヘッダーに

そして、 data-role='footer' とともに新しいクラスをフッターに追加することによって

.footer {
    position: fixed;
    z-index: 10;
    bottom: 0;
    width: 100%;
}
于 2012-08-30T08:33:57.100 に答える
3

残念ながら、これは Android 2.3.5 - 2.3.6 を実行しているデバイス上の jQuery Mobile に存在するバグのようです。

jQuery Mobile の連中は、Google を非難しています。

...これはちょっとした問題のようです - Google が後のバージョンで修正しているように見える Android のリグレッションですが、すべての Android の問題が進むにつれて、明確でも一貫性もありません。

未解決のバグ レポートと詳細については、 https ://github.com/jquery/jquery-mobile/issues/4281 を参照してください。

于 2012-08-17T09:14:54.130 に答える
1

jQuery Mobile の最新バージョンを使用していますか? まだ完全ではありませんが、古いバージョンよりも優れています。これは最新 (1.2.0 アルファ) です...

http://jquerymobile.com/blog/2012/08/01/announce-jquery-mobile-1-2-0-alpha/#download

編集

jQuery Mobile 固定フッターの使用をやめて、代わりにこのクラスをフッターに追加できます。

.custom-fixed-footer {
position: fixed !important;
left: 0px !important;
right: 0px !important;
bottom: 0px !important;
z-index: 999 !important;
}
于 2012-08-17T01:43:40.273 に答える