Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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.

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! =)