最終更新日
記事公開日

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

iPhoneのナビゲーションバー

お客さん

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

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

隊員1号

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

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

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

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

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

この記事のURLをコピー

メールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

関連情報

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

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

詳しいプロフィール