侧边菜单匹配全屏

Question

CSS

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

将高度设置为100%可以使菜单正常覆盖整个屏幕，但是如果我的页面内容较多，需要向下滚动，侧边菜单看起来很尴尬，因为它的高度与我电脑的屏幕尺寸。

即使向下滚动，我也希望滚动条的高度占据整个屏幕的高度。我怎样才能做到这一点

Answer 1

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

你能试试吗？

Answer 2

你可以试试这个......

* {
  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>

侧边菜单匹配全屏

Side Menu matching full screen

html

css

height

你可以试试这个......