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

Posted by Darrell Warren
Darrell Warren
6,644 Points

Why does my footer not stick to the bottom of my page?

I've created the "wrapper" in my HTML markup, including everything below the body tag except the footer; I set the footer height to 70px; I used the .wrapper {min-height: calc(100vh-70px);}, yet my footer doesn't stick to the bottom of the page... Help!

Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

Either post all of your code or create a snapshot and link to it so we can see exactly what is going down.

3 Answers

Jenny Veens
Jenny Veens
10,896 Points
Jenny Veens
Jenny Veens
10,896 Points

Hi Darell,

You might have more luck setting this css on the footer element:

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}
Wes Thompson
Wes Thompson
4,928 Points
Wes Thompson
Wes Thompson
4,928 Points

Thanks, Jenny. This seems to work perfectly. Is there a reason one would not want to use this very simple code to accomplish a sticky footer rather than the complicated method taught in the video?

Peter Nyiro
Peter Nyiro
15,177 Points
Peter Nyiro
Peter Nyiro
15,177 Points

Hi, Darrel!

I think what causes the problem is the browser's user agent stylesheet. For me, in Chrome if I use the developer tools and inspect the p element (paragraph) right above the footer, I can see there is a little white gap. That p element has a 1em margin by default of the user agent stylesheet which is 16px what is pushing down the footer by 16px .

So if I want to use the calc() function as the teacher in the video I need to calculate that 16px . So my calc() function is going to be calc( 100vh - 105px ) .

Or you can reset the p element's margin-bottom to 0 in the normalize.css and after that you can set calc(100vh - 89px).

I hope it helped you, if not might be a more specific problem.

ywang04
ywang04
6,762 Points
ywang04
ywang04
6,762 Points

Yep, you're right. But in my chrome, the default margin value of p element is 16px for top and 16px for bottom. That is why I get 89 + 16 + 16 = 121 px......

Darrell Warren
Darrell Warren
6,644 Points
Darrell Warren
Darrell Warren
6,644 Points

So should I not use the min-height: calc (100vh-(footer height)) with a "wrapper"?

Jenny Veens
Jenny Veens
10,896 Points
Jenny Veens
Jenny Veens
10,896 Points

It's hard to say without seeing your code... Feel free to post it so myself others can better help you.