Home

100vw

100vw is a CSS length value that represents the full width of the viewport. The unit vw stands for viewport width, with 1vw equal to 1% of the viewport’s width. Therefore, 100vw corresponds to the entire width of the viewport, independent of the containing block.

It is commonly used to create elements that bleed to the edges of the screen, such as

Considerations: in many browsers, 100vw includes the width of a vertical scrollbar. If a page also has

Support and history: The vw unit is part of CSS Values and Units Level 3 and has

Related concepts: other viewport units include 100vh for viewport height, and vmin and vmax, which relate to

full-width
banners,
hero
sections,
background
layers,
and
overlays.
Because
100vw
is
tied
to
the
viewport,
such
elements
can
span
the
entire
screen
regardless
of
their
parent
container.
margins,
padding,
or
borders,
this
can
lead
to
horizontal
overflow
or
an
apparent
extra
width.
Techniques
to
mitigate
this
include
using
overflow-x:
hidden
on
the
root
element,
using
width:
100%
on
top-level
containers
where
appropriate,
or
using
dynamic
viewport
units
(for
example
dvw)
that
respond
to
UI
chrome
changes
on
mobile.
been
supported
by
major
browsers
for
many
years.
100vw
is
widely
used
in
responsive
design
and
fluid
layouts.
the
smaller
or
larger
viewport
dimension.
Dynamic
viewport
units
such
as
dvw
and
dvh
address
changes
in
mobile
UI
chrome.