I have written a complex menu for my website and it works well on screens larger than 768px. However, when the screen size is less than 768px, the menu no longer fits on the screen and I have to convert it into a sliding menu with an animated button that slides in and out of the screen. This also works well.

The problem is when my sliding menu enters the screen. In this case, the menu should take up the entire height of the screen, but it only takes up 100% of the height. And when I scroll the main page a little (i.e. the page is more than 100%), the bottom of my sliding menu is completely visible, which should not be the case.

Here is part of the CSS that is relevant to this section:

@media only screen and (max-width: 768px) {
 nav.HNSC_bodyNavigation div.HNSC_wrapperNav div.HNSC_bodyMenu {
   position: absolute;
   top: 0;
   left: -300px;
   bottom: 0;
   z-index: 99;
   padding-left: 5px;
   max-width: 220px;
   width: 100%;
   height: 100%;
   background: linear-gradient(to left, #4e1cff87 0%, #683be3f5 50%, #3c47f7f7 100%);
   transition: all 1s linear;
   -webkit-transition: all 1s linear;
   -moz-transition: all 1s linear;
   -o-transition: all 1s linear;
   -ms-transition: all 1s linear;
 }
}

To solve this problem, I used this CSS to make my sliding menu take up the entire height of the screen instead of 100% of the screen:

@media only screen and (max-width: 768px) {

body {
   position: relative;
}

}

Using the above CSS, two problems are created on the page:

1)A second scroll bar appears on the right side in addition to the main scroll bar.

2)A blank space with no elements is created in the footer area (which is what causes the second scroll bar).

How can I get rid of this problem?

Do I need to use javascript or can it be solved with CSS?