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

CSS

Jesse Kroon
Jesse Kroon
8,275 Points
Posted by Jesse Kroon
Jesse Kroon
8,275 Points

Can't get the sticky footer to work properly.

I am working on my personal website. I am trying to get a sticky footer to work in two of my pages: 'over.html' and 'contact.html'. I have tried doing this using the cal(100vh - ..px) method used in one of the Treehouse videos. For my index page it works fine, but the other two pages either display it with some whitespace beneath it, or they get pushed down so far that a scrollbar pops up, which I don't want it to.

Anyone able to check out the code and see where I go wrong? I am still a beginner so I am not exactly sure where the mistake/bug is.

Here's the link to my workspace, hope it makes any sense to you: https://w.trhou.se/kg42v6wm34

2 Answers

Adam Ryde
Adam Ryde
5,222 Points
Adam Ryde
Adam Ryde
5,222 Points

dont mention it buddy, i am just glad i could help. dont worry about your source code, i am a beginner also, so my css code is usually all over the shop. :) anyway if you need help in the future mate just give me a shout.

Adam Ryde
Adam Ryde
5,222 Points
Adam Ryde
Adam Ryde
5,222 Points

Aup mate,

i looked through your code and in fairness there is so many CSS rules it was hurting my eyes lol.

There is an easier way of doing a sticky footer and that is using Flexbox. its easy enough, if you have not covered it in the course yet dont worry, but i do suggest doing it after you have fixed your sticky footer problem within your personal website as it is going to do wonders for you layout techniques, and its a lot easier.

before you put any code into your main.css go into your three pages, and in all the containers directly above your footer, give them an additional class. you can make it what ever you want but for the purposes of this i will say you put it as 'sticky' so in your base styles, before all your media queries and all that jazz put this in.

body { display: flex; flex-direction: column; min-height 100vh; }

.sticky { flex: 1; }

it will all make sense when you cover flexbox, but for now thats a nice fix for you. if you have any questions i will try to answer them for you buddy. Hope this helps.

Jesse Kroon
Jesse Kroon
8,275 Points
Jesse Kroon
Jesse Kroon
8,275 Points

Adam,

Thank you so much! I have been at it for two days now but I didn't get it to work. Was about to pull my hair out. That trick did it. I am not sure why, but I will probably learn that during the course.

Sorry for the difficult to read source code. Still a beginner as I said, so my code isn't written that efficiently yet.