Viewport width disregarding body scrollbar

Asked

Viewed 44 times

-1

I have an HTML saying that the scrollbar will be 8px, so:

::-webkit-scrollbar {
    width: 8px;
}

In this HTML will have an image gallery, where each photo will occupy 20% of the body width, so I did so:

.foto_galeria{
    width: 20vw;
    float: left;
}

And then I end up having problems, when I check the size of mine body I see that it has 1912px, and when I go to check the size of the DIV foto_galeria, it ta with 480px, and 480 X 4 = 1920 and not 1912, then it is taking into account the size of the scrollbar, how to solve this?

Because the way it is, the DIV photo_gallery breaks, is not next to each other. It is only in 4 columns, because it does not fit 5 in the body.

Follow the full code:

::-webkit-scrollbar {
	width: 8px;
	background-color: $marrom;
}
.foto_galeria{
  width: calc(20vw - 2px);
  height: calc(20vw - 2px);
  float: left;
  border: solid 1px #000000;
}
<body>
<div class="foto_galeria">1</div>
<div class="foto_galeria">2</div>
<div class="foto_galeria">3</div>
<div class="foto_galeria">4</div>
<div class="foto_galeria">5</div>
</body>

css viewport

  • Dude you have to put the full code at least so that we can simulate your problem there... Just what you posted just to help you kick...

  • Oops, I put the whole code

1 answer

1


You need to reset the margin of the body, otherwise it will be included in the Divs calculation, making them not fit in the body width, because the vw will take the full width of the window (without scroll bar).

The body has margin of 8px, so the vw will pick up 1912px and try to distribute in 1896px (1912px minus 16px of the lateral margins of the body).

body{
  margin: 0;
}

::-webkit-scrollbar {
	width: 8px;
	background-color: $marrom;
}
.foto_galeria{
  width: calc(20vw - 2px);
  height: calc(20vw - 2px);
  float: left;
  border: solid 1px #000000;
}
<div class="foto_galeria">1</div>
<div class="foto_galeria">2</div>
<div class="foto_galeria">3</div>
<div class="foto_galeria">4</div>
<div class="foto_galeria">5</div>

Browser other questions tagged css viewport

You are not signed in. Login or sign up in order to post.