今まで高さを画面いっぱいに表示したい場合は、[min-height: 100vh;]を指定してきました。
一昔前は100％でなんとかかんとかやっていたと思いますが、100vhでも100％でもiOSではアドレスバー部分が表示されているときは
肝心の下の部分が隠れてしまっていました。

まあ、つまりはiOSのSafariでは100vhの計算にアドレスバーが考慮されてない、ということなんです。
結局のところアドレスバー部分の高さが押し出されてはみ出してしまうという形です。

これでデザインン上問題がでてしまうものはJavascriptなどを使用して調整していたこともありましたが
CSSで対応できるようになったということでご紹介したいと思います！

html{
  height: -webkit-fill-available;
}
body{
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

高さを画面いっぱいに表示したい要素に-webkit-fill-availableを指定する、ただこれだけです。

ただこれ問題点が1つだけあります。
デスクトップのchromeでも同じことが適用されてしまうんです。

iOSのsafariだけでいいのに…

ということで以下の書き方で実際には使用しましょう。

@supports (-webkit-touch-callout: none) {
html{
  height: -webkit-fill-available;
}

  body {
    min-height: 100vh;
    height: -webkit-fill-available;
  }
}

上記を記載することで、chromeを避けてsafariのときのみだよ、という指定になります。

ただ結局のところ、まだまだ安定してない方法なんです。実は…
いろいろ調べているどJavascriptで実装したほうがやっぱり安定というふうに記述されていることも
多いので、今後の発展を願いながら一度試してみてもいいかもしれません。

こういうやり方がおすすめだよ！という方法があれば
コメントなどで教えていただけると嬉しいです！

それでは。

• code,
• css3,
• web