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
Ryan Rassoli
3,365 PointsSticky Footers
Can someone explain how if you set the min-height of a footer to 100vh, why doesn't the footer take up the space of the entire page? And what is the purpose of saying min-height: calc (100vh-89px);?
1 Answer
Jacob Jackson
UX Design Techdegree Student 7,833 PointsHey Ryan!
Great question.
So the vh units refer to setting the placement of the selected element on the page, relative to the viewport (saying 100vh means you want to set it in the vertical position of 100% of the height of the page. I know this can come across confusing because it's a "height" property, but try to think of it the way described above for this particular styling.
min-height: calc (100vh-89px);
The thing to remember when you're using this method to accomplish your goal with the footer is that any content you put into that footer will actually push the footer out of the site (think of the 100vh as meaning the top of your footer div). To combat this, you would manually have to make up for it by subtracting the height of the content you add to the div.
To avoid this altogether, I would recommend using flexbox which has a built-in way to do this automatically. Here's the lesson below
https://teamtreehouse.com/library/creating-a-sticky-footer-with-flexbox
I hope this helps! Good luck!
-Jake