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
Rosie Bell
782 PointsWhen I created a sticky footer, a small vertical margin remains.
I have included the calc function, and it's better than when the css was just .wrap { min-height: 100vh; }
but a very small amount of scroll remains in Chrome (but firefox is fine)
Rosie Bell
782 Points@rudy - yes, I have - normalize.css
Christian Andersson
8,712 PointsCan you post the code?
Jonathan Glapio
1,148 PointsI was experiencing the same thing. I think it has something to do with the padding we added to the h1 element (to clear the margin collapse).
So i did a little workaround. I put negative padding on the h1 to erase the gap created by margin collapse. And added that to the calc value. So it looked like this:
h1{text-align:left; padding:-1px 0 0 0; }
min-height:calc(100vh -90px);
(i just added the negative padding to the footer value.) Probably not the best way to do it...but it worked for me in chrome :D.
8 Answers
Andrew McPheron
14,290 PointsSo after much frustration, I found the difference between the instructors code (located in the project files) and our code. Without saying a single thing, as has happened already repeatedly with the other videos, he changed his footer HTML to a <span> instead of a <p> element. While it only seems to make a small change to something in the body, the project files "final" css also has a new selector:
p:last-child { margin-bottom: 0; }
I have no idea why this course is so incredibly inconsistent, I've had to repeatedly add stuff to my code from the project files that wasn't mentioned anywhere.
Rudy Tan
Courses Plus Student 16,635 PointsOw yea, normally p has some default margin. I always declare them to zero at the top and give margin according to what I wanted...
Mitch Wynne
6,493 PointsJust wanted to chime in here and confirm that the 'small gap above the sticky footer' (visible using 'inspect' in Chrome developer tools etc) was being caused by the bottom-margin of a <p> element.
After reading this thread and doing some debugging myself it appears this worked for Guil as his code includes a 'p:last-child { margin-bottom: 0; }' - which wasn't brought to our attention during the course.
You can combat this by either setting <p> to 'margin: 0;' or by adding Guil's code, 'p:last-child { margin-bottom: 0; }' (which is probably the best way as you won't have to remember to remove the final <p> element's bottom margin should you add further content to your page.
osman musse
34 PointsAndrew McPherson your saying the truth TreeHouse is good to learn but in important lessons like CSS Layout they dont tell us the changes they done, like that P:last parent. It was so frustrating i had to figure it out myself . GOOD POINT Andrew McPheron
Rosie Bell
782 PointsThanks Jonathan, I'll give that a try. If anyone is interested in having a look, my code is here. https://www.dropbox.com/sh/z6ulj6t4gudestd/AAAFgl046cgWPVQuXlFoalVQa?dl=0
Miron Mitrea
Courses Plus Student 5,167 PointsI don't think it's the padding, if you just comment it out the scrollbar and small margin don't disappear.
Miron Mitrea
Courses Plus Student 5,167 PointsI have empty space on top of the footer. The wrap div ends exactly 16 px short of the footer
( https://postimg.org/image/9lq5qsmd1/ ). If add the 16 px to the media query calculus, 105 instead of 89 px the scrollbar disappears.
Where is that space from?
Miron Mitrea
Courses Plus Student 5,167 Points
Jelger Kingma
9,684 PointsI have the exact same problem, (sorry no help here). Only I noticed in firefox there is no gap. But in Safari, Opera, and Chrome the gap is there. Does this also happen with your code? Anyone an idea?
Rudy Tan
Courses Plus Student 16,635 PointsRudy Tan
Courses Plus Student 16,635 Pointshave you included the reset CSS or normalize CSS?