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

Question

滚动条在固定的div上无法工作，这里是codepen演示：

        #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);
        }

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

- Mostafa Ellethy

---

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

@Aurasphere 当我在侧边栏上设置overflow: scroll时，当项目溢出时，滚动不起作用。 但是通过从min-height更改为height来解决了这个问题，谢谢。 - Mostafa Ellethy

@Aurasphere 我已经尝试了，但系统通知我必须等待2天才能接受它 :( - Mostafa Ellethy

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

这段代码在示例中可以正常工作。如果您想在自己的代码中使用，只需确保使用overflow-y:scroll，而不是overflow-y:auto。

- Cannicide

Answer 2

问题解决了。 使用 min-height 可以让菜单一直显示，但只有在使用 height 时，滚动才能正常工作。

- Mostafa Ellethy

---

最小高度在Safari浏览器上无法正常工作。如何修复？ - Sangrai