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 CSS Layout Basics Getting Started with CSS Layout Creating a Sticky Footer

This doesn't work

https://w.trhou.se/zojybscevl

Am I doing something wrong? I still have the vertical scroll.

The whole calc thing looks an incredibly hacky solution and not elegant at all. Is there a more simple solution - even if it means more CSS code?

I'm no CSS expert but even for me - if I need to start calculating with numbers inside the CSS file - it doesn't look right.

Please tell me I'm not right...

2 Answers

Steven Parker
Steven Parker
229,732 Points

It looks right to me. I don't see a vertical scroll bar unless I make the window too short for the content to fit.

But this isn't the only way to stick a footer at the bottom of the window. There's another technique using "position: fixed;" and "bottom: 0;" that will do it without the calculation (but the scrolling works differently).

I got it to work by replacing 89 with 112px on the .wrap class. But again, I have a feeling that on different screens this might break. I'm using a 1920x1080 resolution on a 12.5 inch display.

I also got it to work by adding the following to the .main-footer:

.main-footer { position: fixed; bottom: 0; width: 100%; }

I had to add the width, otherwise the footer gets pushed to the left for some reason.

Thanks again Steven!

Kara Caputo
Kara Caputo
2,213 Points

Thank you! I was having the same issue.