Html5モバイルdivは、ナビゲーションバーの下部を達成するために下部に固定されているいくつかの方法

要件

下部のナビゲーションを修正する必要がありますか？コンテンツだけをスライドさせることができ、ナビゲーションメニューは固定されています。効果は以下の通りです。

この記事では、fixed、absolute、css3のflex layoutの3つの実装方法に焦点を当てます。

htmlの構成は以下の通りです。

<div class="box">
    <div class="roll">Scroll area</div>
    <footer>Bottom fixed menu</footer>
</div>
<! ---public styles-->
<style>
html,body{
    margin:0;padding:0;height:100%;width:100%;
}
footer{
    background:#F2F3F6;max-width: 750px;width: 100%;height: 1rem;
}
</style>

方法1：固定を使う

.box{
        .roll{
            padding-bottom:1rem;
         }
    footer{
        position:fixed;bottom:0;z-index:999;
    }
}

方法2：絶対値を使用する  

.box{
    position: relative;height: 100%;
    .roll{
        position: absolute;bottom:1rem;top: 0;overflow-y: scroll;-webkit-overflow-scrolling: touch;height: auto;
    }
    footer{
        position: absolute;bottom:0;
    }
}

方法3：フレックスを利用する 

.box{
    display:flex;display: -webkit-flex;height:100%;flex-direction:column;
    .roll{
        flex: 1; width: 100%;overflow-y: scroll;-webkit-overflow-scrolling: touch;height: auto;
    }
}

概要

1. ボトムポジショニングが固定または絶対の場合、優先順位が低く、他のdivに覆われることになります。ここでは、z-indexを使用して、彼を最高レベルにし、覆われないようにする必要があります。

2. ボトムポジショニングが固定または絶対で、入力ボックスがある場合、以下のようになります。

ios: 入力ボックスがアクティブになったとき、下がポップアップしない（合理的）。
Android：入力ボックスをアクティブにすると、その後に下がポップアップします（合理的ではありません）。  

従来の解決策：iosとAndroidの両方に対応するために、通常は底部を固定に設定し、入力ボックスをアクティブにするときに底部の位置を相対に変更する。

3. 方法 2 または 3 を使用するには、-webkit-overflow-scrolling プロパティを設定する必要があります。これにより、スムーズなスクロール領域が確保され、-webkit-overflow-scrolling は、要素がモバイルデバイスでスクロールバック効果を使用するかどうかを制御します。

4. overflow-y: scroll; を設定すると、ブラウザによってはスクロールバーが表示されるため、以下のようにグローバルにスタイルを定義する必要があります。

::-webkit-scrollbar{//scroll scrollbar settings
        width: 0px; height: 0px; color: rgb(136, 0, 0);">#fff; 
}

5. モバイルでは、方法3のレイアウト形態が推奨されます。

この記事は、Html5モバイルdivは底部ナビゲーションバーの下部に固定されているいくつかの方法は、これを導入するために、より関連するHtml5底部ナビゲーションバーの内容は、スクリプトホーム以前の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来的に多くのスクリプトホームをサポートして願っています！.