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 through chrome while the 100  width renders perfectly without the need for a horizontal scroll bar  vw has about a centimeter extra

User · Answer

Havengard s answer doesn t seem to be strictly true  I ve found that vw fills the viewport width  but doesn t account for the scrollbars  So  if your content is taller than the viewport  so that your site has a vertical scrollbar   then using vw results in a small horizontal scrollbar  I had to switch out width  100vw for width  100  to get rid of the horizontal scrollbar

User · Answer

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

User · Answer

vw and vh stand for viewport width and viewport height respectively  The difference between using width  100vw instead of width  100  is that while 100  will make the element fit all the space available  the viewport width has a specific measure  in this case the width of the available screen  including the document margin  If you set the style body   margin  0    100vw should behave the same as 100   Additional notes Using vw as unit for everything in your website  including font sizes and heights  will make it so that the site is always displayed proportionally to the device s screen width regardless of it s resolution  This makes it super easy to ensure your website is displayed properly in both workstation and mobile  You can set font-size  1vw  or whatever size suits your project  in your body CSS and everything specified in rem units will automatically scale according to the device screen  so it s easy to port existing projects and even frameworks  such as Bootstrap  to this concept

[html] Difference between Width:100% and width:100vw?

Examples related to html

Examples related to css