CODEWITHSUNDEEP
htmlcss
nickpish
nickpish

Reputation: 847

CSS: laying out fixed header w/ scrolling sidebar

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.

Upvotes: 0

Views: 1304

Answers (1)

Serlite
Serlite

Reputation: 12258

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.

Upvotes: 3

Related Questions