Home Ask Login Register

Developers Planet

Your answer is one click away!

Jeremy Buller February 2016

Set the width of an element equal to monitor size WITHOUT varying on zoom

I would like to set the width of an element as a relationship of the native resolution of the viewer's monitor.

I understand that CSS "width:100%;" exists, but I am not happy with the way that method deforms layout, or may behave in a frustrating manner for viewers who want to zoom in/out.

Instead, I'd like to be able to have an element behave like "width:100%" only at zoom=100%. Is this possible (with CSS or Javascript)?


Nuwan Chinthana February 2016

vw and vh are the units which you need to use. viewport (monitor of the user) is measured using vw and vh. (viewport width and viewport height respectively.)

1vw = 1% of Viewport width

vh is the behaving same. 100vh is same as 100% of viewport height.

100vw and 100vh are same to the full monitor width and height.

Post Status

Asked in February 2016
Viewed 3,469 times
Voted 9
Answered 1 times


Leave an answer

Quote of the day: live life