- 最終更新日
- 記事公開日
iPhoneだけbottomのmarginが効かない?フッターに付くナビゲーションバー分だけ差し引く
![iPhoneのナビゲーションバー](https://www.css-rescue.com/wp-content/uploads/2022/07/20220708-1-1024x576.jpg)
![お客さん](https://www.css-rescue.com/wp-content/uploads/2021/05/guest.png)
iOS(iPhone/Mac/iPad)ブラウザで見たときだけ、bottomのmarginが効いてないの・・・
おそらく、一番下のフッターまでスクロールしたときに、下からピョンと出てくるナビゲーションバー?制御ボタン?みたいなのが被さってしまっているんだと思うけど、どうしたらいい?
![隊員1号](https://www.css-rescue.com/wp-content/uploads/2021/05/profile.png)
以下のCSSコードを追加してください↓
margin-bottom:calc(env(safe-area-inset-bottom));
これで、ナビゲーションバー分のスペースを開けることができます。
もっと余白を追加する場合は、以下のようにします↓
margin-bottom:calc(3em + env(safe-area-inset-bottom));