unkerr’s poem

日々の開発におけるポエム

コンテンツ量が少ないときのみフッターを画面下部に固定したい場合に発生した問題と対処法

よく散見するのが、body 内の全要素を wrapper で囲み、wrapper と footer に以下のような CSS を設定する方法です。

<html>
  <head>
  </head>
  <body>
    <div id="wrapper">
      <header>
      </header>
      <main>
      </main>
      <footer>
      </footer>
    </div>
  </body>
</html>
#wrapper {
  min-height: 100vh;     /* コンテンツの高さの最小値をブラウザの高さに指定 */
  position: relative;
  padding-bottom: 45px;     /* フッターの高さを指定 */
  box-sizing: border-box;     /* パディングとボーダーを幅と高さに含める */
}

footer {
  position: absolute;
  bottom: 0;
  height: 45px;
}

しかし、この方法で対処した際に一つ問題が発生しました。

PC で閲覧する分には問題ないのですが、iOS で当該ページを確認したところ(Android は未検証)、コンテンツ量が少ないときに、画面下部にあるブラウザのツールバーがフッターに被ってしまうのです。

Safariツールバーを非表示にできるので、ツールバーを非表示にするとフッターはしっかり下部に固定されているのですが、これではいちいちツールーバーを非表示にしないとフッターが表示されません。

いろいろ試行錯誤した結果、最終的に以下のように CSS を設定することで解決しました。

html {
  min-height: 100%;
  position: relative;
  box-sizing: border-box;
}

body {
  padding-bottom: 45px;
}

footer {
  position: absolute;
  bottom: 0;
  height: 45px;
}

より良い方法がありましたら教えてください。