自分自身の備忘録として記載します。
開発したアプリケーションを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が浮かずに表示領域下部に固定されるようになりました。