Audiovisual Communications Major turned Web Developer | Foodie | Cinephile
I speak Spanish | English | French | Japanese |
Work for Center of Puerto Rican Studies
Location
Mayagüez, Puerto Rico
Education
B.A. Audiovisual Communications
Work
Jr. Web Developer at Center for Puerto Rican Studies
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.
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.
Interesting. Very simple solution. Thanks. In that case, is 100vw a better responsive solution than %?
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.
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?