ラインモバイルのLPの模写について。

Question

ラインモバイルの模写をしています。
URL: https://mobile.line.me/
の模写をしています。
レスポンシブ対応時にハンバーガーメニューが横からスライドしてくる形までは実装できました。

しかし、ハンバーガーメニューをスライドして表示させて後に、ハンバーガー側を下にスライドしていくとメインのコンテンツの終わりまでずーっとスクロールしてしまい、ハンバーガーメニューがずっと上に行き真っ白な状態になります。

スクロールの高さ制限をハンバーガーメニュー側に設ければこの不具合は解消できそうだと考えていますが、CSSでこの不具合の回避方法はありますか？

以上、ご回答の程よろしくお願いいたします。

Answer 1

positionをfixedにすればいいのでは？
ハンバーガーメニュー内のものが画面に収まらない場合は別途検討必要ですが、この情報量だとそれもないでしょうし。

Comments

[5hqch1]

ハンバーガーメニューの特徴という項目をオープンした場合画面に収まらなくなるのでposition: fixed;ではスクロール不能になるので解決できませんでした。
メインコンテンツ側にoverflow: hidden;を当てて解決できますでしょうか？

[5hqch1]

メインコンテンツに
overflow: hidden;
height: 100vh;
にて対応することができました。
ありがとうございました。