DEV Community

Discussion on: Width: 100% VS. width: 100vw

Collapse
 
mikeott profile image
Michael O

This happens because 100% will make the element fit into it's contained or available space.

100vw will attempt to fit the available screen including the document margin, and so you'll need to remove the body margin:

body { margin: 0; }

100vh will behave the same way.

Problem solved.

Collapse
 
edgarnegronrabell profile image
Edgar A Negron

Interesting. Very simple solution. Thanks. In that case, is 100vw a better responsive solution than %?

Collapse
 
mikeott profile image
Michael O • Edited

I don't think there is a right or wrong answer to that question. I've always used 100% without any dramas, but I'd imagine that if I changed all instances of 100% to 100vw it would be fine.

Thread Thread
 
mandaputtra profile image
Manda Putra

If i dont specify my body to 100vh and 100vw why some width: 100%; and height: 100%; wont work?

Is there a way to make my body always 100% height and 100% width?