CODEWITHSUNDEEP
csscss-positionfixed
Leon Gaban
Leon Gaban

Reputation: 39044

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

enter image description here

Upvotes: 2

Views: 2703

Answers (2)

Shikkediel
Shikkediel

Reputation: 5205

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).

Upvotes: 4

GeneralBear
GeneralBear

Reputation: 1021

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

Upvotes: 0

Related Questions