閉じる

ドロワーメニュー(ハンバーガーメニュー)の一番下がiPhoneで切れて表示されない場合の対応策

HTMLでスマートフォンメニュー、ドロワーメニュー(いわゆるハンバーガーメニュー)を実装する場合、メニューが多くなり縦に長くなる場合はスクロールで問題が生じやすいです。

javascriptやjQueryでメニューを実装している場合は、そのファイルで設定、調整する形になりますが、ほとんどがCSSで解決できます。

スクロールがうまくいかない場合の設定で試すこと

ドロワーメニューでスクロールで問題がおきる場合は、
親要素に下記のどれかを追加して解決できる場合は試してましょう。
overflow-y: auto;
height:値;
max-height:値;
max-height: calc(値);
overflow-scrolling: touch;
overflow-y: scroll;

例:

ul {
overflow-scrolling: touch;
overflow-y: scroll;
max-height: 100vh;
}

iPhoneで一番下のメニューが切れて表示されない場合は

ドロワーメニューのスクロールの問題が解決しても、iPhoneで一番下のメニューが見えない、途中で切れて表示されない事がよくあります。
safariだけの場合という事もあります。

その場合は最後、最終の要素にpadding-bottomかmargin-bottomを設定してみましょう。

li:last-child

例:

li:last-child{
margin-bottom:40px;
}

特にsafariのみ一番下のメニューが途中で切れてしまう場合はこの設定で解決できる場合があります。

それ以外でもcssでpaddingを設定して調整が効く事もあるので色々試してみましょう。

ピックアップ記事

  1. キーワード
    SEO(Search Engine Optimization)とはGoogleなどの検索エン…
  2. Webサイトやブログ内に企業用Facebook公開ページの投稿を埋め込んで表示できるFacebook…
  3. iPhoneの「カレンダー」アプリに見覚えがないアドレスで「今すぐクリックしてiPhoneを保護しま…
ページ上部へ戻る