From the course: Cutting-Edge CSS

Unlock this course with a free trial

Join today to access over 24,000 courses taught by industry experts.

Beyond viewport width

Beyond viewport width - CSS Tutorial

From the course: Cutting-Edge CSS

Beyond viewport width

(upbeat music) - [Instructor] Designers often one to set the width of an element, like an image to the full width of the viewport. For this, we have the viewport width and height or VW and VH units. Set it to 100 VW and you get 100% of the width of the viewport. 100 VH gives you 100% of the height of the viewport. But there's a problem. The width of the viewport includes the scroll bar. And if the scroll bar is always present, as it is in Windows, that means the viewport with is wider than the actual displayed viewport. And as a result, an element set to 100 VW is wider than the displayed area and horizontal scrolling occurs so you can see the entire element. Not great. To solve this problem, the CSS working group is working on some new units. So consider this a preview of something that is coming. In addition to viewport width and viewport height, we will now have large viewport width and height, small viewport…

Contents