溢出滚动不会在固定的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); }
两件事:首先,尝试使用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时,只有滚动才能完美地工作。