前提
レスポンシブメニューが開いたときの画面を作っていて、画面上部（ロゴがあるスペース）以外をメニューリストで画面いっぱい覆いたいのですが、縦にスクロールすると普通にメニュー以外の画面が表示されてきてしまいます。
実現したいこと
画面上部（ロゴがあるスペース）以外をメニューリストで画面いっぱい覆いたいです。
発生している問題・エラーメッセージ
縦にスクロールすると普通にメニュー以外の画面が表示されてきてしまいます。
該当のソースコード
HTML
<section class="header"> <div class="inner"> <div class="header_container"> <div class="logo_area"> <p class="logo_txt">東京都 中央線沿いの調剤薬局 / 在宅医療</p> <img src="/img/logo.svg" alt="ロゴ"> </div><!--logo_area--> <div class="header_menu"> <div class="header_menu_top"> <div class="recruit"><a href="#">採用情報</a></div> <div class="shopinfo_headertop"><a href="#">吉祥寺店</a></div> <div class="shopinfo_headertop"><a href="#">中野店</a></div> </div><!--header_menu_top--> <div class="header_menu_bottom"> <nav> <ul class="header_menu_list"> <li class="header_menu_items"><a href="#"><span>Top</span>トップ</a></li> <li class="header_menu_items"><a href="#"><span>News</span>お知らせ</a></li> <li class="header_menu_items"><a href="#"><span>Pharmacy</span>調剤薬局</a></li> <li class="header_menu_items"><a href="#"><span>Home Care</span>在宅医療</a></li> <li class="header_menu_items"><a href="#"><span>Column</span>お役立ちコラム</a></li> <li class="header_menu_items"><a href="#"><span>Company</span>会社概要</a></li> <li class="header_menu_items"><a href="#"><span>Contact</span>お問い合わせ</a></li> </ul> </nav> </div><!--header_menu_bottom--> </div><!--header_menu--> <div class="sp_menu"> <div class="inner"> <nav> <ul class="sp_menu_list"> <li class="sp_menu_items"><a href="#">トップ</a></li> <li class="sp_menu_items"><a href="#">お知らせ</a></li> <li class="sp_menu_items"><a href="#">調剤薬局</a></li> <li class="sp_menu_items"><a href="#">在宅医療</a></li> <li class="sp_menu_items"><a href="#">お役立ちコラム</a></li> <li class="sp_menu_items"><a href="#">会社概要</a></li> <li class="sp_menu_items"><a href="#">お問い合わせ</a></li> </ul> </nav> </div><!-- /.inner --> </div><!--sp_menu--> <div class="hamburger"> <span></span> <span></span> <span></span> </div><!-- /.hamburger --> </div><!--header_container--> </div><!--inner--> </section><!--header-->
CSS
.header { width: 100%; margin-bottom: 14px; .header_container { display: flex; justify-content: space-between; .logo_area { // margin-right: auto; img { } .logo_txt { font-size: 12px; margin: 0 0 8px 0; } } .header_menu { @include mq(sp) { display: none; } .header_menu_top { height: 45px; display: flex; align-items: center; justify-content: right; .recruit { margin-right: 42px; a { font-size: 14px; text-decoration: none; position: relative; &::before { content:''; position: absolute; top: 50%; right: -18px; transform: translateY(-50%); background: url('/img/angle-right-solid\ \(1\).png'); width: 7px; height: 12px; } } } .shopinfo_headertop { margin-right: 10px; width: 115px; height: 45px; text-align: center; background-color: $main-blue; border-radius: 0 0 5px 5px; a { line-height: 45px; text-decoration: none; font-size: 15px; color: #fff; } } } .header_menu_bottom { nav { .header_menu_list { margin-top: 25px; padding: 0; display: flex; justify-content: center; .header_menu_items { list-style: none; width: 115px; margin-left: 10px; text-align: center; position :relative; &::after { content:''; position: absolute; bottom: -5px; left: 0; width: 115px; height: 2px; background: $main-lightblue; } a { color: #333; text-decoration: none; position: relative; span { display: inline-block; white-space: nowrap; font-size: 10px; color:$main-blue; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); } } } } } } } .sp_menu { background: $bg-blue; position: absolute; z-index: 10; top: 90px; left: 0; padding: 0; margin: 0; width: 100%; height: 100%; @include mq(pc) { display: none; } nav { .sp_menu_list { width: 100%; display: inline-block; padding: 0; z-index: 1000; .sp_menu_items { list-style: none; a { display: inline-block; width: 100%; text-decoration: none; font-size: 15px; color: #333333; padding-bottom: 14px; border-bottom: 1px dotted #B9D1E0; margin-bottom: 28px; } } } } }
試したこと
.sp_menuクラスに対してposition:fixedをつけてみたり、高さを100vhにしてみたりしたのですが、ダメでした。
補足情報（FW/ツールのバージョンなど）
OS：windows10
Editor：VSCode
ブラウザ：Chrome
0 コメント