Difference between Width:100% and width:100vw?

Question

I have to fit an iframe in screen height. Obviously, I wanted 100% as in width but, since that doesn\'t work, I used 100vh. But vh like vw is not exactly 100%. In my laptop

Answer 1

You can solve this issue be adding max-width:

#element {
   width: 100vw;
   height: 100vw;
   max-width: 100%;
}

When you using CSS to make the wrapper full width using the code width: 100vw; then you will notice a horizontal scroll in the page, and that happened because the padding and margin of html and body tags added to the wrapper size, so the solution is to add max-width: 100%