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

Posted by anonymous123
anonymous123
5,794 Points

What is the viewport?

.container { display: flex; min-height: 50vh; <--- this is supposed to make the container always take up 50% of the viewport but it never even looks like it taking up 50% of the viewport }

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

The viewport is the screen/browser window. If you set a value of 50vh, it will always take up 50% of the viewport height, same for 50vw which stands for viewport width respectively. With vw/vh values, it will always scale the same regardless of device as the viewport value will always be the same for each device.

Trick:

You can create a sticky footer using the vh value:

Create a wrapper around your header and content, use the closing tag before the footer.

In CSS, use a min-height property for that wrapper: min-height: calc(100vh - your footer height px);

This will make the footer always stick to the bottom of the viewport regardless of the size of the content above it.

anonymous123
anonymous123
5,794 Points

thank you for explaining jamie! sorry that i didnt reply to you last time. I just didnt want you to think that i thought i was better at css than you because that is not true. I am a beginner. We are all good in our own ways and we all put a lot of effort into this! =)