-1

I have been trying to understand the actual use of using width 100% vs width 100vw. How is it different on using margin:0 and otherwise?

radsin
  • 65
  • 2
  • 11

4 Answers4

2

When you specify width as a percentage, it’s a percentage of the containing block’s width. So if you have a div with a width of 400px, and there’s another div inside it with a width of 100%, the inner div will be 400px.

100vw is 100% of the viewport width. If you have a window that’s 1200px wide and you set the inner div in the example above to 100vw, it will be 1200px, not 400px.

ray
  • 26,557
  • 5
  • 28
  • 27
0

Let's say you have a , a direct child of a that you want to fill the entire view width: 100vw; height: 100vh; so you use width: 100vw; height: 100vh; width: 100vw; height: 100vh; . Everything works the same as width: 100%; height: 100vh; width: 100% height: 100vh; until you add more content and the vertical scrollbar appears. Because vw considers the scrollbar as part of the viewport, width: 100vw; will be slightly larger width: 100%; This slight difference ends up adding a horizontal scrollbar (requires the user to see this little extra width), and as a result, the height will also be slightly different in both cases.

This must be taken into account when deciding which one to use, even if the parent element is the same size as the document's viewport.

Example:

Using width:100vw; :

.fullviewport {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100vw;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>
Pavel Silber
  • 105
  • 1
  • 9
0

% values indicate the percentage of the parent element and vw values indicate directly of the viewport width, no matter what the parent element is.

So if you have a div of width 50vw, and inside it,

<div style="width: 50%"></div>   /* 50% of the parent(50vw) so half of it */
<div style="width: 50vw"></div>  /* 50vw, so the same width as the parent */


.container  {
  width: 50vw;
  
  background-color: green;
}

.percent {
  width: 50%;
  height: 20vh;
  
  background-color: blue;
}

.vw {
  width: 50vw;
  height: 20vh;
  
  background-color: red;
}
<div class="container">
  50vw width
  <br>
  <div class="percent"> 50% width</div>
   <div class="vw"> 50vw width</div>
</div>
cSharp
  • 2,884
  • 1
  • 6
  • 23
0

VW is the Viewport width, % is the percentage of the parent element. If you have a 500px wide parent element, with a 1080p screen (1920x1080).

% would make the child element 500pixels wide, but with VW, the child element would be the full width of the screen (1920 pixels).

.vw {
  width: 100vw;
  border: 2px solid lime;
}

.pr {
  width: 100%;
  border: 2px solid cyan;
}

.hpx {
  width: 100px;
}
<div class="vw">
  vw
</div>

<div class="pr">
  %
</div>

<br><br>

<div class="hpx">
  <div class="pr" style="border: 2px solid magenta;">
    %
  </div>
</div>


<div class="hpx">
  <div class="vw" style="border: 2px solid yellow;">
    vw
  </div>
</div>

With VW, any scrollbars are also counted as apart of the width, and margins are also included into the full width.

ethry
  • 731
  • 6
  • 17