Viewport Units (vw, vh)
What are Viewport Units?
Imagine a canvas that stretches and shrinks automatically to match the size of your window. If you draw a square that takes up exactly 10% of the screen width, the square gets bigger if you resize the window wider, and smaller if you make the window narrow.In CSS, Viewport Units are relative sizing units based on the dimensions of the browser window (the viewport):
vw (Viewport Width): 1vw is equal to 1% of the viewport's width. 100vw spans the full screen width.vh (Viewport Height): 1vh is equal to 1% of the viewport's height. 100vh spans the full screen height.Why does it matter?
Viewport units are essential for full-screen headers, layout sections, or overlay modal backdrops. For example, settingheight: 100vh; on a hero section forces it to fill the entire height of the user's screen, creating a premium visual landing page before they scroll.
Syntax Breakdown
width: 50vw; — Sets element width to exactly 50% of the screen width.height: 100vh; — Sets element height to exactly 100% of the screen height.Common Mistakes
100vw includes the width of the vertical scrollbar. This can cause elements with width: 100vw; to exceed the viewable area, triggering a minor horizontal scrollbar. Use standard width: 100%; instead if scrollbars are present!Quick Reference
vw — Percentage unit of the viewport width.vh — Percentage unit of the viewport height.100vh — Fills the entire screen height.Your Task
Configure the `.full-page` element to take up the full height of the viewport by setting its `height` property to `100vh`.
index.html
Type code above to start the lesson.
Live Preview