【问题标题】：Side Menu matching full screen侧边菜单匹配全屏
【发布时间】：2020-02-17 01:21:29
【问题描述】：

CSS

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

将高度设置为 100% 可以使菜单正确覆盖全屏，但如果我页面中的内容更多并且我需要向下滚动，则侧边菜单看起来很尴尬，因为它的高度与屏幕大小相同我的电脑。

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

【问题讨论】：

你能设置位置吗：固定的；

标签： html css height

【解决方案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>

【讨论】：

【解决方案2】：

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

你可以试试吗？

【讨论】：