最終更新日
記事公開日

iPhoneだけbottomのmarginが効かない?フッターに付くナビゲーションバー分だけ差し引く

iOS(iPhone/Mac/iPad)ブラウザで見たときだけ、bottomのmarginが効いてないの・・・

おそらく、一番下のフッターまでスクロールしたときに、下からピョンと出てくるナビゲーションバー?制御ボタン?みたいなのが被さってしまっているんだと思うけど、どうしたらいい?

以下のCSSコードを追加してください↓

margin-bottom:calc(env(safe-area-inset-bottom));

これで、ナビゲーションバー分のスペースを開けることができます。

もっと余白を追加する場合は、以下のようにします↓

margin-bottom:calc(3em + env(safe-area-inset-bottom));

関連情報

運営者プロフィール
隊員1号

IT系フリーランスとして10年の経験を持つレスキュー隊。HTML・CSS・JS・PHPなど幅広いスキルを持つ。

詳しいプロフィール