Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Stefan Karakashev
Front End Web Development Techdegree Student 5,098 PointsHow to create sidebar with CSS?
I want to create a website with a sidebar to the left (similar to Treehouse's) and all the content to the right that scrolls with the page while the sidebar remains static throughout.
I tried with
.sidebar { min-height: 100vh; }
but when the content to the right goes beyond the viewport and I scroll, the sidebar also scrolls.
Any help would be greatly appreciated!
2 Answers
Kallil Belmonte
35,561 PointsI made this experiment, see if that works for you: https://codepen.io/anon/pen/oxZeqx
Kallil Belmonte
35,561 PointsHi Stephen, sorry for the delay, the code that I provided is not with the main container fixed, at least I did scroll it, the box has 2000px of height, and if you add a margin-bottom of 30px for example, it will separate from the bottom.
I took a print showing the scroll bar: http://i.imgur.com/LSlEsri.jpg
Stefan Karakashev
Front End Web Development Techdegree Student 5,098 PointsHi Kallil,
Yes, it works. Thanks for your help!
Stefan Karakashev
Front End Web Development Techdegree Student 5,098 PointsStefan Karakashev
Front End Web Development Techdegree Student 5,098 PointsHi Kallil,
Thank you very much for your help! Now the sidebar is fixed, but the content to the right is also now fixed and doesn't scroll. I want the wrapper to contain a lot of information so to be able to scroll up and down, but at the same time the sidebar to remain static while the wrapper scrolls. Just like the Treehouse site's design.