将溢出设置为固定div上的滚动不起作用

Question

溢出滚动不会在固定的div上工作，这里是代码本演示

        #side-navbar {
          overflow: scroll;
          position: fixed;
          min-height: 100vh;
          width: 6rem;
          float: left;
          background-color: #000;
          -webkit-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45);
          -moz-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45);
          box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45);
        }
                

Answer 1

问题解决了。使用min-height保持菜单的永久呈现，但使用height时，只有滚动才能完美地工作。

Answer 2

两件事：首先，尝试使用height而不是min-height。其次，使用overflow-y:auto，它比overflow：scroll工作得更好。下面是您的代码：

null

 #side-navbar {
          overflow-y: auto;
          position: fixed;
          height: 100vh;
          width: 6rem;
          float: left;
          background-color: #000;
          -webkit-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45);
          -moz-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45);
          box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45);
        }

<div id="side-navbar">
<hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr>

</div>