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 Mobile-First CSS Layout Mobile-First CSS Layout Creating a Sticky Footer

Sherrie Jeffers
seal-mask
.a{fill-rule:evenodd;}techdegree
Sherrie Jeffers
Front End Web Development Techdegree Student 7,909 Points
Posted by Sherrie Jeffers
.a{fill-rule:evenodd;}techdegree
Sherrie Jeffers
Front End Web Development Techdegree Student 7,909 Points

I never had any issues with needed to scroll down to see the footer, it was still hovering some above bottom.

When I added my code:

.wrap { min-height: 100vh; }

to the min-width 769px, and increased my screen to larger than that, it was still hovering off the bottom of the screen instead of being lower like his was. Not sure why this is.

jb30
jb30
44,805 Points

Is your footer inside .wrap?

1 Answer

Ian Crook
Ian Crook
3,485 Points
Ian Crook
Ian Crook
3,485 Points

The footer in the video is not the same size as the footer in workspace.

Inspect the overall height of the footer element and it will show 112px, making it calc(100vh - 112px);