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

Posted 2023-03-05

【中文标题】将溢出设置为在固定 div 上滚动不起作用

【英文标题】：Setting overflow to scroll on fixed div doesn't work

【发布时间】：2016-08-17 17:20:45

【问题描述】：

溢出滚动不适用于固定 div，这里是 codepen demo

#side-navbar 溢出：滚动； 位置：固定； 最小高度：100vh； 宽度：6rem； 向左飘浮; 背景颜色：#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); 盒子阴影：2px 0px 15px 0px rgba(0, 0, 0, 0.45); #side-navbar .logo img margin: 0.5rem; width: 5rem; height: auto; #side-navbar .menu-container overflow:visible; min-height: calc(100vh - 24.6rem); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; #side-navbar ul.social-menu overflow: visible; </pre>

【问题讨论】：

你能提供更多细节吗？它有什么问题？

@Aurasphere 设置溢出时：在我的侧边栏滚动当项目溢出时滚动将不起作用。但是问题是通过从最小高度改为高度来解决的，谢谢。

@Aurasphere 我试过但系统通知我必须等待 2 天才能接受它:(

【参考方案1】：

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

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

它在 sn-p 中工作。在您的代码中尝试一下。如果你不想使用overflow-y auto，那么请确保使用overflow-y:scroll。

【参考方案2】：

问题解决了。 使用 min-height 可以永久保持菜单渲染，但使用 height 只有滚动才能完美运行。

【讨论】：

最小高度不适用于 Safari 浏览器。如何解决？