Detailed explanation
The main difference is the reference used to calculate the size. `1vw` equals 1% of the viewport width, while `1vh` equals 1% of the viewport height. These units do not depend on the parent element’s dimensions. A percentage, however, gets its reference from the CSS property being used. For ordinary block layout, `width: 50%` is calculated from the containing block’s width. Saying “percentages always use the parent’s corresponding dimension” is a useful starting point, but it is not fully accurate.
The containing block is often the parent’s content box, but positioning and layout rules can make it a different ancestor. Percentage references also vary by property: in horizontal writing modes, percentage padding and margins, including top and bottom, use the containing block’s width. By contrast, `transform: translateX(50%)` uses the element’s own transform reference box. Percentage heights need particular care: if the containing block’s height depends on its content, `height: 50%` on a normal-flow child generally behaves as `auto`, rather than becoming half the parent’s eventual rendered height.
For example, inside a 600px-wide containing block, `.half { width: 50%; }` gives a 300px content width under the default box-sizing model. With a 1200px-wide viewport, `width: 50vw` gives 600px regardless of that container’s width. The breakout pattern `.full-bleed { width: 100vw; margin-left: calc(50% - 50vw); }` combines both references: it shifts a viewport-wide element left from a centred container. It assumes the containing block’s horizontal centre aligns with the viewport’s centre; it is not a universal solution for arbitrary nesting.
Use percentages for components that should adapt to their available container space, and viewport units for dimensions tied to the browser’s viewing area. Watch for overflow: `100vw` can include space occupied by a classic vertical scrollbar, making it wider than the available content area. On mobile, `vh` corresponds to the large viewport size, so browser controls can obscure a `100vh` section; `dvh` follows the dynamic viewport, while `svh` uses the small viewport. Interviewers value these practical qualifications more than definitions alone.
Key points to remember
- `vw` and `vh` measure hundredths of viewport width and height, independently of parent sizing.
- The reference for `%` depends on the property, not always the parent’s corresponding dimension.
- Percentage widths usually resolve against the containing block’s width; percentage heights often require a definite containing-block height.
- Percentages suit container-responsive components; viewport units suit viewport-sized sections and breakout layouts.
- `100vw` can cause scrollbar-related overflow; mobile height layouts may benefit from `dvh` or `svh`.
Common mistakes candidates make
- Claiming every percentage is based on the immediate parent’s matching dimension.
- Expecting `height: 100%` to fill the screen without establishing an appropriate containing-block height.
- Using `100vw` or the full-bleed margin formula everywhere without checking overflow and container alignment.
Likely follow-up questions
Why does `height: 100%` sometimes appear not to work?
For a normal-flow element, percentage height generally needs a definite containing-block height to resolve against. If that height is content-dependent, the percentage usually behaves as `auto`; flex and grid layouts have additional rules that can establish definite sizes.
How do `vh`, `svh`, `lvh`, and `dvh` differ?
`svh` uses the small viewport with browser controls expanded, while `lvh` uses the large viewport with them retracted; `vh` corresponds to `lvh`. `dvh` tracks the dynamic viewport as browser controls change, but this can resize the layout during scrolling.
When should I choose `width: 100%` instead of `width: 100vw`?
Use `100%` when the element should fill its containing block rather than the viewport. It avoids the common viewport-scrollbar mismatch, although padding and borders can still cause overflow under `content-box`, so consider `box-sizing: border-box`.
Interview tip: Start with the reference-size distinction, give a numerical width example, and then mention percentage-height resolution and viewport overflow as practical caveats.