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

Marcos Raj
PLUS
Marcos Raj
Courses Plus Student 5,979 Points
Posted by Marcos Raj
Marcos Raj
Courses Plus Student 5,979 Points

Why do we use min-height:100vh? When tried with other values it was not working? Why?

While fixing the footer at same position we were using the min-height value to 100vh. can you please explain why do we use the same and why not the other values are taking place when i replace them?

3 Answers

Ellis Briggs
Ellis Briggs
11,108 Points
Ellis Briggs
Ellis Briggs
11,108 Points

I believe it is to do with the relationship with the viewport and it helps to keep it a certain size while in the documents flow.

For a footer I guess you could do it from the bottom up, however, I believe IE9 supports vh and a lot of other do not so maybe go for px if you want it to be a set height and make it a display block, as it will help with keeping it in one position.

Look at: https://snook.ca/archives/html_and_css/vm-vh-units

saif ahmad
saif ahmad
9,302 Points
saif ahmad
saif ahmad
9,302 Points

See we use min-height basically to have a sticky footer in the design. By this i mean a footer that sits permanently at the bottom of the website.Now other value may not be replacing it because for different layouts different values may work . FOR example i assume you would be making the BEST CITY GUIDE layout : so in that specific layout we use the following code to have a sticky footer: min-height: calc(100vh - 89px); We used 89px specifically for our requirements. If you are making another layout then you will have to find out the px requirement on your own.

Ellis Briggs
Ellis Briggs
11,108 Points
Ellis Briggs
Ellis Briggs
11,108 Points

You can change the size of it using the media query, and then use that to change the whole value into pixels before reducing it or reducing it based on the size of the window. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

and min-height/width helps to make sure that any text or anything else you would have in the footer will not eventually be squished if the window effects the size of the footer.

Hope this helps!