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

问题

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

I'm working with a fixed position div and making elements scrollable from inside it. Similar to this problem here.

I was able to get the scrollbars to show up, my problem is that I have a fixed header, and my fixed sidebar has to be pushed down in my view.

This allows the user to keep scrolling past the browser window so you lose sight of the scroller.

Is there anyway to keep the scrollbar in view with my example?
So that when the scroller hits and stops at the bottom of the view, you also see the last item.

.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%;
}

回答1:

If I understand the issue correctly - you want the fixed element to fill the screen apart from the header height... then you could try :

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

Looking at the other solutions on the page that was linked to, my personal second choice would be to use JavaScript (but the question doesn't have that tag of course).

回答2:

I changed the height to 90% and it seemed to work:

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

来源：https://stackoverflow.com/questions/29754195/how-to-keep-scroller-in-view-inside-of-fixed-position-div-with-top-pixels-pushin