如何在固定位置div内部保持滚动条，顶部像素将其向下推？

Question

http://jsfiddle.net/leongaban/6rd2hhpq/8/

我正在使用固定位置div并使元素可以从里面滚动。 Similar to this problem here

我能够显示滚动条，我的问题是我有一个固定的标题，我的固定侧边栏必须在我的视图中按下。

这允许用户继续滚动浏览器窗口，以免丢失滚动条。

无论如何都要将滚动条保持在my example的视野中？ 因此，当滚动条在视图底部点击并停止时，您还会看到最后一项。

.red-box {
    position: fixed;
    width: 100%;
    height: 40px;
    color: white;
    background: red;
}

.sidebar {
    position: fixed;
    top: 60px;
    overflow-y: auto;
    margin-left: 20px;
    width: 180px;
    height: 100%;
}

Answer 1

如果我正确理解了这个问题 - 你希望固定元素在标题高度之外填满屏幕......那么你可以尝试：

.not-stuck {
    height: calc(100% - 60px);
}

查看链接到的页面上的其他解决方案，我个人的第二选择是使用JavaScript（但问题当然没有该标记）。

Answer 2

我将高度改为90％，似乎有效：

.not-stuck {
    position: fixed;
    top: 60px;
    overflow-y: auto;
    margin-left: 200px;
    width: 180px;
    height: 90%;
}