web-dev-qa-db-ja.com

CSS-スクロール時にiOS Safariの下部に固定

アプリを作成していますが、ブラウザの下部にナビバーを貼り付けたいです。私のようなものがあります

<div style="display: flex; flex-direction: column; height: 100%"
  <header>Header</header>
  <section style="height: 100%">Main Content</section>
  <footer>Sticky footer</footer>
<div>

これはデスクトップに最適です。赤がヘッダー、黄色がフッター、青がコンテンツの簡単な例を次に示します。

enter image description here

ただし、iOS Safari（および一部のAndroidブラウザーもそうだと思います）でスクロールすると、下部の44ピクセル程度がツールバーで覆われます。

enter image description here

回避策について here などを読みましたが、実際の「良い」解決策はありません。しかし、iOS上のInstagramのウェブサイトはこれを解決したようです：

スクロールなし：

enter image description here

下部のナビゲーションをスクロールしてツールバーの上に再配置すると、次のようになります。

enter image description here

1つの解決策は、ツールバーを常に表示することですが、Instagramスタイルのアプローチを採用したいと思います。 CSS（またはCSS + JS）で実装する方法がわかりません。 Instagramの効果を実現する方法を知っている人はいますか？スクロールすると、Safari iOSツールバーの下部ナビゲーションバーがシームレスに移動します。

編集：これは、この問題を解決する実用的なデモです。

  <!DOCTYPE html>
  <html style="height:100%"lang="en">
    <head>
      <meta charset="UTF-8">
      <title></title>

    </head>
    <body style="height:100%; padding: 0; margin: 0">
      <div style="display: flex; flex-direction: column; height: 100%">
        <header>Header</header>
        <div>
          <div>Main content</div>
        </div>
        <footer style="position: fixed; bottom: 0; width: 100%">Sticky footer</footer>
      </div>  
    </body>
  </html>
ioscssmobile-safari
8
xenetics

やってみました：

footer {
  position: fixed;
  bottom: 0;
  z-index: 10; /** this value affects the overlapping **/
}
7
VorganHaze

modernizrを追加することができます。これは、ブラウザーでサイトを開いたときに、あらゆるものを検出するJavaScriptコードです。 IOSデバイス上のブラウザを使用すると、クラスIOSが提供されます。モバイル用のクラスも提供されると思います。

2つのクラスを組み合わせると、margin-bottomには、ボディにIOSおよびmobileクラスがある場合、ツールバーのピクセル数を使用します。例えば ​​body.ios.mobile footer{ margin-bottom: 40px; }

ところで私はそれが与えるクラスの正確な名前を知りません。私はそれがそれをすることを知っています。

リンク modernizr

0
Jeremy