エグウェブ.JP@福岡/WEBセミナー・分析・WEBサイト制作

福岡でWEB分析・ホームページ・WEBサイト作成・WordPress、Googleアナリティクス、LINEスタンプ、Photshop・illustrator、Excelの講座やセミナーを開催

【CSS】ドロワーメニューが途中で切れてしまい下まで表示できない場合の対処法

time 2020/03/03

CSSを扱っていて、PCの時は問題ないのですが、スマホでドロワーメニューを表示した時に、メニューが途中で切れてしまい、下まで表示がされない症状が発生しました。

解決したので、その方法です。

余白の高さを調整する

height:100%だとまずい?

ドロワーメニューの上部に「三(三本線)」があると、その部分がメニュー上部の余白になってしまいます。

実際の要素の大きさはheight + (余白)

このドロワーメニューの場合だと「三」の部分が高さ100pxあるので、下のメニューの高さは余白分を引き算してあげるとよさそうです。

height: calc(100% – 100px);

まとめ

必ずしもこの設定で解決するとも限らないので、値や要素の調整など、色々と試してみる方が良いかと思います。

ご参考下さい(^ ^)

download

プロフィール

EGUWEB

EGUWEB

【皆さまの人生に最良のファーストステップを】WEBサイトを作りたい!WEB分析を学びたいけど分からない。とりあえず色々と知りたい!皆様の悩みを解決できるように頑張ります。 [詳細]

カテゴリー