今回はウェブ開発をしていて実際にハマった話とその解決方法を紹介していきます！例えば、[position: fixed]などを使ってドロワーメニューを作ることはよくあると思います。その時、端末のサイズによってメニューの中身が端末をはみ出してしまうと思います。その際に[overflow: auto]と[height: 100vh]を使ってスクロールさせたのですが、なんとスマホで最後までスクロールできない不具合が．．．。今回はそんな話をしていきます！

はじめに

今回行った修正はJavascriptを使用すること前提なので、あらかじめご了承ください。（受託業務とかだとJS開発費とかで見積もり額が変わるかもってこと）

一応、[vh]ではなく、[height: 100%]を使って実装することもできますが、構造に依存するのであまりお勧めしません。

ハマった事象

実際にハマってるコードを書いてみました！

See the Pen 失敗パターン by カノト (@kanoto) on CodePen.

「// ここが問題のコード」っていうところが該当箇所です。

こちらからデモページを見ることができます！

このページをスマホで見ると、どんな状況か分かると思います。

メニューが15まであるはずですが、すべて見ることができないはずです。

もし、メニューにスクロールが発生しない場合は横画面にしてみてください。

なぜこんなことが起きた？？？

今回使っている[vh]という単位はViewportで設定されている幅を基準にしています。

つまり、（Viewportで高さを特に指定していない状態で）[100vh]を指定するとアドレスバーを含む、ブラウザの高さを返します。

Viewportの範囲と実際のページの範囲を画像に表してみました！

Viewportはアドレスバーを含んでいるのでうまく高さが噛み合わず、バグが発生してしまう状態になります。

解決方法

解決方法はJSを使って高さを設定しましょう！って感じになります。

（一応、「はじめに」で書いた通り[height: 100%]でも対応できるのですが、これは余裕があれば書きます。）

さて、まずはコードを書いてみます！

See the Pen 成功パターン by カノト (@kanoto) on CodePen.

JSを見てみましょう！

ドロワーメニューにwindowの高さを設定しています。

それだけです(笑)

高さを設定する場所は[overflow: auto]を掛けている要素に設定してあげてくださいね！

成功パターンのでデモはこちらで確認できます！

[vh]や[vw]は便利な反面、ちゃんと理解していないとバグるので気を付けたほうがいいですね！！

最後までありがとうございました～！！