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

Emmanuel Rojas
Emmanuel Rojas
6,994 Points

Sticky Footer not working properly

Hi I still getting the gap below the the footer and the browser and also the scrollbar is still there I used the calc(100vh - 89px) but it is still not working. I am using google chrome but if I go to firefox it works perfectly. I need some help to understand whats going on. this is my code: http://codepen.io/era104/pen/vGdrVM

Thank you!

3 Answers

Ivan Villa
Ivan Villa
8,597 Points

it seems that the body element has a margin that is pushing it away from the bottom of the page, hence giving you a space.

you can add this css

body {
  margin: 0;
}
Emmanuel Rojas
Emmanuel Rojas
6,994 Points

thank you very much I'm gonna try

Emmanuel Rojas
Emmanuel Rojas
6,994 Points

Thank you! but why if I open the page using firefox it works perfectly?

Ivan Villa
Ivan Villa
8,597 Points

each browser handles things a bit differently; it's annoying but part of the game lol.

This is why things like normalize.css exist. https://necolas.github.io/normalize.css/

it's common to use a library like this to help make things more consistent.