閉じる

ドロワーメニュー(ハンバーガーメニュー)の一番下が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. ahrefs
    SEOツール 「ahrefs(エイチレフス)」とは?ahrefs(エイチレフス)は、日本でも有名…
  2. reCAPTCHA
    ホームページを公開すると設置したメールフォームに海外からスパム投稿され大量の迷惑メールが届くことがあ…
  3. ビデオ会議で便利なのがWeb会議サービスです。無料で利用できるサービスもいくつかあります。「Skyp…
ページ上部へ戻る