自分自身の備忘録として記載します。
開発したアプリケーションをiphoneのsafariで表示させた場合、
safari下部のメニューバーがスワイプによって、表示されたり表示されなかったりします。
その表示・非表示によって、フッターが画面下部に固定されず、
メニューバー分、浮き上がって表示されてしまったので、その問題をCSSで解消する方法です。
■開発環境
OS：windows10
Laravel 8.83.14
Vue.js 2.6.12
■確認端末
iphone12 mini
■解決方法
1. 表示する高さをheight 100vhで、デバイスの高さ全体に指定
2. その状態で、body全体にheight: -webkit-fill-available;を指定
3. footerは、position:fixed; bottom:0でページ下部に固定
app.css
body{
height: -webkit-fill-available;
}
.body-container{
height: 100vh;
}
.body-container__footer{
position:fixed;
bottom:0;
}
これでメニューバーの表示・非表示に連動して、footerが浮かずに表示領域下部に固定されるようになりました。
参考にしたサイトは以下です。
CSSのみ：height 100vhとiPhone safariメニューバーの問題は-webkit-fill-availableで解決