2

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

Community
  • 1
  • 1
Leon Gaban
  • 36,509
  • 115
  • 332
  • 529

2 Answers2

4

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

Leon Gaban
  • 36,509
  • 115
  • 332
  • 529
Shikkediel
  • 5,195
  • 16
  • 45
  • 77
0

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%;
}
GeneralBear
  • 1,011
  • 3
  • 11
  • 35
  • Thx, I see... it doesn't work all the time however, for example if I resize the browser window a little smaller and refresh – Leon Gaban Apr 20 '15 at 17:24
  • 1
    I guess it's a little hack, but height: 75% definitely seems to do the trick. Of course, I'm not sure if that fits with your purposes. – GeneralBear Apr 20 '15 at 17:38
  • A percentage height may work for many screens, but beware; sometimes on very tall screens the scroll bar may stop slightly above the bottom of the region. I ran into the fixed value % problem when testing on portrait monitors... as I resized the window the "down" button in the scrollbar would disappear on small window sizes and have a blank margin on huge windows. The calc option works MUCH better. – millebi Jul 03 '15 at 18:11