Боковое меню соответствует полноэкранному

Question

CSS

.sidenav {
    height: 100%;
    position: relative;
    overflow-y: scroll;
    background: #000000;
    width: 15%;
}

Установка высоты на 100% заставляет меню правильно покрывать весь экран, но если содержания на моей странице больше, и мне нужно прокрутить вниз, боковое меню выглядит неловко, так как его высота совпадает с размером экрана моего компьютера.

Я хочу, чтобы высота полосы прокрутки занимала всю высоту экрана, даже когда я прокручиваю вниз. Как я могу достичь этого

Answer 1

Вы можете попробовать это ............

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 30px 30px 30px 230px;
}

.sideNavbar {
  height: 100vh;  
  width: 150px;
  background: #0004;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 20px 30px;
  position: fixed;
  top: 0;
  left: 0;
}

.sideNavbar .sidemenu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sideNavbar .sidemenu li {
  margin-bottom: 10px;
}

<div class="sideNavbar">
  <ul class="sidemenu">
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
  </ul>
</div>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam nisi ad dignissimos aspernatur molestiae dhic libero pariatur assumenda sit. Soluta eveniet, quos, porro, aliquam commodi quae am assumenda iure, nesciunt aut, animi re ad eum, provident, molestias ullam accusamus ea suscipit cum!</p>
<br>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque nam necessitatibus ipsum, consequatur corporis culpa, ducimus cum dignissimos ut quae nihil domodi dolorum est. Magni amet praesentium sint voluptates odio, ullam optio quia nobis inventore recusandae laudantium quo, sit repudiandae aliquid! Consequuntur, culpa! Invens suscipit est! Cumque dolorem enim, deluta temporibus cupiditate cum.
</p>
<br>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque nam necessitatibus ipsum, consequatur corporis culpa, ducimus cum dignissimos ut quae nihil domodi dolorum est. Magni amet praesentium sint voluptates odio, ullam optio quia nobis inventore recusandae laudantium quo, sit repudiandae aliquid! Consequuntur, culpa! Invens suscipit est! Cumque dolorem enim, deluta temporibus cupiditate cum.
</p>

Answer 2

height: 100%
max-height: 100%
overflow-y: scroll

Вы можете попробовать это?