Difference Between Width:100% and Width:100Vw

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

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% (for an element that is a child to body).

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 exactly the same 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 that already uses rem as unit for everything) to this concept.

CSS Units - What is the difference between vh/vw and %?

100% can be 100% of the height of anything. For example, if I have a parent div that's 1000px tall, and a child div that is at 100% height, then that child div could theoretically be much taller than the height of the viewport, or much smaller than the height of the viewport, even though that div is set at 100% height.

If I instead make that child div set at 100vh, then it'll only fill up 100% of the height of the viewport, and not necessarily the parent div.

body,html {    height: 100%;}
.parent {    background: lightblue;    float: left;    height: 200px;    padding: 10px;    width: 50px;}
.child {    background: pink;    height: 100%;    width: 100%;}
.viewport-height {    background: gray;    float: right;    height: 100vh;    width: 50px;}

<div class="parent">    <div class="child">        100% height        (parent is 200px)    </div></div>
<div class="viewport-height">    100vh height</div>

Why is {{ width: 100vw , height: 100vh }} bigger than my browser window?(margin:0 not being applied)

Browser default styles include spacing for those elements, so you have to remove margin and padding from the <html> and <body> elements in your Css:

html,
body {
   margin: 0;
   padding: 0;
}

100vw causing horizontal overflow, but only if more than one?

As already explained by wf4, the horizontal scroll is present because of the vertical scroll. which you can solve by giving max-width: 100%.

.box {
    width: 100vw;
    height: 100vh;
    max-width:100%;  /* added */
}

Working Fiddle

What is the difference between using vh/vw vpx and Regular PX/%?

It is always better to use relative sizing with web elements (such as width / height / font-size etc) - so setting explicit pixels is soooo last century. Setting fontsize with em or even better REM values and setting height / widht with percentages is a better approach.

width: 100%; - will size the width of the element to be 100% of its container

width: 100vw; - will size width of the the element to be 100% of the viewport width

1vw = 1% of the viewport width

100vw = 100% of the viewport width

by the same token -

1vh = 1% of the viewport height
100vh = 100% of the viewport height

Interestingly there is also vmin and vmax - which relate to the smaller and larger sides of the viewport
1vmin = 1% of the viewport smallest side
100vmin = 100% of the viewport smallest side

1vmax = 1% of the viewport largest side
100vmax = 100% of the viewport largest side

vmin and vmax are useful for allowing content to change when you rotate the screen in which the vw and vh won't change but the vmin and vmax will.

100vh and 100vw compared to the current size of the browser window

Add *, *::before,*::after { box-sizing: border-box; } at the start of your file, the border will now be part of the width, like the padding.

Check there : https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing

By default, the box-sizing is set to content-box, that mean that when you set:

width: 100px;
padding: 20px;
border: 5px;

The total width will be 100 of content + 20 padding + twice 5 (5 for border-left, and 5 for border-right) = 130px;

If you set the box-sizing to border-box it will include the borders and padding in the width

So the width will always be the width that you set, regardless to the border and padding, and it will automatically calculate the width for the content : 100px - 20px - 2 * 5px = 70px;

Example:

$('#toggleBoxSizing').on('click', function(){    $('div').toggleClass('contentbox');});

*, *::before, *::after {    box-sizing: border-box;}html, body {padding: 0; margin: 0; }
div {  height: 100vh;  width: 100vw;  border: 4px solid black;}
div.contentbox {  box-sizing: content-box;}
#toggleBoxSizing {   margin: 50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div>
    <button id="toggleBoxSizing">Toggle "box-sizing: border-box;"</button></div>

Why there is a scroll on x-axis when width is 100vw?

Because setting width to 100vw will give 100vw width to the element + any padding or margins which results in overflow

100vw element = 100vw width + padding + margin

which is not the case with 100%;

100% element = 100% width inclusve of margin + padding

Mostly the reason is body margin. So set body -> margin to 0 and see it working as 100%.

What is the difference between % and vw in css?

They aren't necessarily interchangeable.

The behavior will mainly depend on the element's position in the DOM, since this will determine what the element's containing block is. If an element has a width of 100%, it will have a width of 100% of the containing block's width. If the element has a width of 100vw, it will have a width of 100% of the viewport's width (the viewport may not be the element's containing element, but viewport-percentage units will always be relative to the viewport).

A strictly percentage based width will always be relative to another element's width, but when using viewport-percentage lengths, an element's width can actually be relative to the viewport's height. For instance, if an element has a width of 100vh, it will have a width of 100% of the viewport's height. This isn't possible when using strictly percentage based widths.

Viewport-percentage length are always going to be relative to their initial containing block, which is the viewport:

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

Whereas percentage based units are going to be relative to their parent element (i.e., their containing block), which may happen to be the body/html element, in which case they will be similar to viewport-percentage lengths.

4.3. Percentages: the ‘<percentage>’ type
Percentage values are always relative to another value, for example a length. Each property that allows percentages also defines the value to which the percentage refers. The value may be that of another property for the same element, a property for an ancestor element, or a value of the formatting context (e.g., the width of a containing block). When a percentage value is set for a property of the root element and the percentage is defined as referring to the inherited value of some property, the resultant value is the percentage times the initial value of that property.

Difference Between Width:100% and Width:100Vw