滚动条在侧面导航

Question

我正在研究文档查看器的一个小方面项目，它有一个侧窗格，允许用户单击以导航到大文档的某些部分。

我的全部目标是通过css3和jQuery变得更好，但我遇到了一个奇怪的问题。

侧边菜单有一个10的列表，这10个onclick中的每一个都扩展了一个3的子树，总共30个。

我有侧面导航的以下css和点击时显示或隐藏导航的jquery按钮。

.slide-out-bar {
    background-color: #333;
    display: inline-block;
    float: left;
    height: 100vh;
    color: #FFFFFF;
    width: 210px;
    overflow-y: scroll;
    position: fixed;
    top: 146px;
    left: 0px;
}

我的期望是，当列表越过屏幕时，用户将能够滚动整个列表以查看他们需要什么。

目前，滚动条只是在底部被切断，仅在中途滚动。我不确定是什么导致它或如何解决它。

我在过去的一天尝试过调试和谷歌搜索结果，但我没有到达任何地方。任何人都可以提出一些建议吗？

以下是codepen的完整代码 https://codepen.io/latimeks/pen/wrMWZg

Answer 1

身高：100vh;意味着元素的高度应该是视口的100％（整个浏览器窗口），而不是容器元素，所以你不能在这里使用它，因为你有上面的标题。您可能希望使用弹性框或绝对定位来排列元素。