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 Foundations Values and Units Numeric and Textual Data Types

Jeremy Liu
Jeremy Liu
2,137 Points
Posted by Jeremy Liu
Jeremy Liu
2,137 Points

Percentages vs Viewports

Is there a real difference between using percent values versus vh and vw values? Are these values interchangeable? For example, if I wanted my div element to be 50% of the windows length, would width: 50vw; be the exact same as width: 50%;?

Finally, if they are not interchangeable, when and why would it be preferable to use vh and vw over %? Is it all just personal preference?

1 Answer

Amber Cookman
Amber Cookman
12,662 Points
Amber Cookman
Amber Cookman
12,662 Points

It seems that the primary difference is that vw/vh is relative to the size of the viewport, whereas percent values are relative to the container. So whether or not they would yield different results would depend on where your div element was nested, and which parent element that percent value is depending on.

Jeremy Liu
Jeremy Liu
2,137 Points
Jeremy Liu
Jeremy Liu
2,137 Points

Okay thanks! So if my paragraph was nested inside of my body element (and my body element didn't have any extra stylings), then would the percent value essentially be the same as vw/vh?