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

Akhter Rasool
Akhter Rasool
8,597 Points
Posted by Akhter Rasool
Akhter Rasool
8,597 Points

Sticky footer

what is this sticky footer?

what is min-height: 100vh ??

what does this do ? increase the height of that element ?

Please Explain.

1 Answer

Tobias Helmrich
Tobias Helmrich
31,602 Points
Tobias Helmrich
Tobias Helmrich
31,602 Points

Hey Akhter,

vh is a unit and stands for "viewport height". The viewport is - as the name implies - the height of the viewport you can see on your screen. What Guil does in this video is setting the min-height of the element with the wrap class to 100vh. 1vh is 1/100 of the viewport which means that 100vh is 100% of the height of the viewport.

The reason he sets the min-height property to this value is because he always wants the footer to be - or stick - at the bottom of the page (that's what you call a "sticky footer"), even when there's not enough content to fill the viewport's height and when the .wrap element is 100vh it will always push the footer element to the bottom of the page. If there's content in the .wrap element that takes up more size than 100vh it will just expand because we defined the min-height.

I hope that helps you to understand it, if not or if you have further questions feel free to ask! :)