提问者:小点点

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


溢出滚动不会在固定的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);
        }


共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>

匿名用户

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