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

Question

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

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

我能够让滚动条显示出来，我的问题是我有一个固定的 header，我的固定侧边栏必须在我的视图中向下推。

这允许用户继续滚动浏览器 window 这样您就看不到滚动条了。

有没有办法让滚动条在 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

我将高度更改为 90%，它似乎有效：

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

Answer 2

如果我对问题的理解是正确的——你希望固定元素填满屏幕 header 高度...那么你可以尝试：

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

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

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

How to keep scroller in view inside of Fixed position div with top pixels pushing it down?

css

css-position

fixed