CSS: laying out fixed header w/ scrolling sidebar

Question

I'm trying to model the basic structure of my page after this site-- i.e. in particular, using a fixed header/nav-bar with an independently scrolling sidebar and a content panel that scrolls normally. It appears the site I referenced is using flexbox features, but I will need to target somewhat older browsers (at least IE8 and above) so I'm hoping to implement this layout with pure CSS or with the help of jQuery.

I have a fiddle set up here that shows the basic structure, based on two main wrappers as follows:

.wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}
.body-wrapper {
    margin-top: 80px;
    width: 100%;
    height: 100%;
}

the problem with my rendition, however, is that the sidebar does not scroll independently, thus the main scroller will cause that sidebar content to scroll in addition to the body content, whereas I want it to affect only the latter.

Thanks much for any assistance here; I'm open to adjustments to my version or a completely different approach.

[This](http://stackoverflow.com/questions/6887112/scroll-particular-div-contents-with-browsers-main-scrollbar) might be helpful for you, as I think it's roughly what you're trying to do. — Ryan Mitchell, Jul 21 '14 at 02:17

Serlite · Accepted Answer · 2014-07-21T03:03:14.167

3

One way to do this, without modifying your existing approach too much, is to use position:fixed with the sidebar as well. You could add these styles to your CSS:

div#mainBody {
    padding-left:220px; /* This is how wide #list is */
}
aside#list{
    position:fixed;
}

Note that I changed your id for the main content container to #mainBody, since you already have a #main on your page, used with the header. (An id needs to be unique.) Here's a JSFiddle to demonstrate.

Hope this helps! Let me know if you have any questions.

EDIT: The reason the content at the bottom of the side bar is cut off is because you have the following style:

aside#list {
    height:100%;
}

This makes the sidebar 100% of the height of the viewport - the problem is, it doesn't have 100% of the viewport height to display itself, since it gets pushed down by the header at the top. As a result, part of the sidebar ends up off the screen, and you can't scroll to it (since the sidebar doesn't scroll with the body anymore). To remedy this, remove that style, and use this instead:

aside#list {
    bottom:0;
    top:80px; /* Height of the header */
}

This will ensure the sidebar begins right below the header, and ends right at the bottom of the viewport. So, scrolling to the bottom of the sidebar will show all the content. Here's an updated JSFiddle for that.

edited Jul 21 '14 at 03:03

answered Jul 21 '14 at 02:24

Serlite

12,130
5
38
49

Thanks much Serlite-- that did it! And good catch on the ID name; I have two issues remaining though: (1) scrolling to the bottom of the sidebar leaves some of the content cut off; I can add extra bottom padding to the `aside#list .container` but I'm wondering if there's a different approach? (2) also, I'm noticing that when using my mouse wheel to scroll content on the sidebar, it also scrolls the body content, whereas in the site I referenced above, this doesn't happen-- i.e. both areas scroll completely independently of one another; do you know how they're achieving this? Thanks! – nickpish Jul 21 '14 at 02:50
1

I've added some CSS to fix the problem with the bottom of the sidebar being hidden. I see what you mean with the scrollbar issue, though it only happens on occasion for me. Not entirely sure why it's happening, it feels like that's just how the browser chooses the context to scroll in. '~' (I did get it to happen in the other site though, if that's any consolation.) – Serlite Jul 21 '14 at 03:09
Fantastic, thanks again. One last question: I guess the `.body-wrapper` I have around the sidebar and `#mainBody` is unnecessary now given that both elements have been handled separately, no? also, thanks for the checking on the scrolling behavior; I'm seeing now that it depends on the browser; in FF it behaves exactly as the other site, just not in Chrome, for me at least... – nickpish Jul 21 '14 at 03:25
1

Yep, just remember to transfer `margin-top:80px` to the style definition for `#mainBody` if you remove `.body-wrapper`. (To compensate for the header's height.) – Serlite Jul 21 '14 at 03:31

CSS: laying out fixed header w/ scrolling sidebar

1 Answers1