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

Posted by Luisa Nino
Luisa Nino
1,532 Points

Stick footer to bottom with Foundation

Hi.

I've built a page with foundation but there is not enough content to push my footer to the bottom of the page.

Is there a way to make a sticky footer? It seems that the results I get on google don't work with foundation's CSS classes.

I'd appreciate some help!

James Barnett
James Barnett
39,199 Points

Create a codepen and show us your code

5 Answers

Michael Hinrichs
Michael Hinrichs
10,920 Points
Michael Hinrichs
Michael Hinrichs
10,920 Points

Without any code we can't help, but I am assuming that you will want to display something outside of your 'container' class and make it either positioned absolute or fixed and have it say something like, bottom: 0px; This, and the correct html structure should give you the correct results.

Luisa Nino
Luisa Nino
1,532 Points
Luisa Nino
Luisa Nino
1,532 Points

Hi.

So I'm using Foundation which for some reason doesn't require a 'container'. Here is my codepen: http://cdpn.io/azHKg

I didn't include the CSS because the layout and positioning come directly from Foundation....

Here is a Hammer build of the site and how it's looking, I the footer climbs up http://cdpn.io/azHKg (it's clearer in the about section where I have no content)

I'd appreciate any help. I will play around with the height but I think there should be something similar to the nav bar to stick the footer to the bottom..

Thanks!

James Barnett
James Barnett
39,199 Points

> I didn't include the CSS because the layout and positioning come directly from Foundation

You can link directly to that CSS in codepen.

Mar Garachana
Mar Garachana
1,726 Points
Mar Garachana
Mar Garachana
1,726 Points

hi Luisa,

i've edited your codepen snippet, just adding a css rule like

footer{
position:fixed;
bottom:0;
}

have you tried? Just as Michael says, it seems to be working fine...

Michael Hinrichs
Michael Hinrichs
10,920 Points
Michael Hinrichs
Michael Hinrichs
10,920 Points

The only thing to be careful about is if you are adding something the the <body> tag, like position: fixed.

The grid is instantiated by a container class, so if you put it outside or the container and position it at the bottom, regardless of what framework you are using, you should be fine.

Even if you put it in the container, postion:absolute and position: fixed, will take it out of the context of the other positioned elements, the only trouble with that is that Foundation might be doing some stuff with body or your specific tags inside of the container.

MY ADVICE Use the Chrome debugger to mess around with it, try doing things with height, and position and make sure their is no float weirdness going on. Your codepen does not have the Foundation CSS in it, so it is hard to give you a correct answer as to what is going wrong with your HTML/CSS.

Cheers! Michael

Luisa Nino
Luisa Nino
1,532 Points
Luisa Nino
Luisa Nino
1,532 Points

Hi, thank you for all your replies. I managed to hook up the css so you can look a little more clearly. I added Mar's solution and it does stick to the bottom but it seems that by adding "fixed" it takes out of the Grid or something.

http://cdpn.io/azHKg

I checked on the Foundation forums as well but it's a tricky one...

Again thanks!

James Barnett
James Barnett
39,199 Points

> it seems that by adding "fixed" it takes out of the Grid

Yep, that's what position: fixed is supposed to do.