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
Godfrey M
Courses Plus Student 2,696 Pointshow can i create a sticky side-bar and bottom footer
hi everyone , i am finding difficulties in creating a code that creates a sticky sidebar on every navigation , and positioning a footer at the extreme bottom of every navigation page however small the context may be. inshort i want my "aside" to stick on every navigation page and the" footer" to be at the extreme bottom of every page. could some one help me with a code that may help...thanks to you all in advance
2 Answers
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 PointsTo create the footer you can use the css calc declaration. There is a workshop on here on how to do this. If this doesn't make sense please search for it in the library and watch. Generally you create a wrapper div in your html starting from above your header and finishing before your footer. You then add the css code to push it down:
.wrapper { height: calc(100vh - 100px); // this takes the viewport height 100vh and minus the height of the footer (you can find this by looking at it in the console) }
This then keeps your footer at the bottom.
As for the sidebar you could use absolute positioning and fix it to the side.
.body { position: relative; }
.sidebar { position: fixed; top: 0; left: 0; }
here is a link to W3Schools it is a good place to go to check code. https://www.w3schools.com/css/css_positioning.asp
Hope this helps.
Godfrey M
Courses Plus Student 2,696 PointsOh Tracy thanks for your quick response please . let me insert this code and see if works otherwise many thanks
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 PointsTracy Excell
Front End Web Development Techdegree Graduate 15,333 Points... your video is on absolute positioning so try setting a parent element to relative and the child to fixed.
.body { position: relative; }
.sidebar { position: fixed; top: 0; left: 0; }
.footer { position: fixed; bottom: 0;}