2

私のPhonegapアプリでは、実際にAndroid 4.0でうまく機能する固定フッターとヘッダーを作ろうとしています。しかし、Android 2.3 では問題ないように見えても、スクロールを開始するとヘッダーとフッターがまったく固定されず、スクロールに合わせて移動します。

関連するコードは次のとおりです。

HTML:

<div class="container-fluid no-padding">
<div id="header">

</div>  
<div class="wrapper">
    <div id="main-content"></div>
    <div id="push"></div>
</div>
<div id="footer" class="main-footer">

</div>

CSS:

html,body,.container-fluid {
    height: 100%;
    font-family: Helvetica !important;
}

#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: -20px; /* the bottom margin is the negative value of the footer's height */
    overflow: scroll;
}

#footer, #push {
    height: 20px; /* .push must be the same height as .footer */
    width: 100%;
}

#footer {
    position: fixed;
    z-index: 10; /* Defect #9 */
    margin: 0;
    bottom:0px;
}

#header {
    position: fixed;
    z-index: 5;
    height: 40px;
    background-color: #FFFFFF;
    width: 100%;
    top: 0px !important;
}

#main-content {
    margin-top: 45px;
}

.main-footer {
    background-color: #cf2129;
    color: #FFFFFF;
}

関連する場合、私は jQuery Mobile を使用していません (私が見つけた awners のほとんどの部分が関連しています) が、代わりに Twitter Bootstrap を使用しています。

どんな指導も大歓迎です

4

3 に答える 3

2

Android 2.2 および 2.3 の簡単な修正を見つけたようです。追加するだけです：

-webkit-backface-visibility: hidden;固定配置を使用している要素に。

詳細はこちら: http://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/

徹底的にテストしていないので、うまくいかない場合はお知らせください。ここでテストするライブ URL: http://codepen.io/benfrain/full/wckpb

于 2014-01-17T09:49:44.513 に答える
0

これは、PhoneGap アプリケーションを開発していたときに発生した一種の問題です。その phonegap バージョンは Android バージョンと互換性がない場合があります。そのため、問題が発生しますが、過去に同様の問題に直面しました。 id から div への使用クラス。お気に入り

<div class="header">
</div>

css では id の代わりに class を使用します。

.header
{
   position:fixed;
}

私はそれが非常に奇妙で面白い答えに見えることを知っています.まったく価値がありません. しかし、これは私にとってはうまくいきます。そのため、私はあなたと共有しています。

于 2013-05-11T05:13:18.033 に答える