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 Author

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

Collapse
mikeott profile image
Michael O • Edited on

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?