Overflow-y scrollbar leave a gap to the margin

Question

I have the following code:

HTML

<body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">

<div class="container-fluid h-100">

    <!-- Logo -->
    <div class="row align-top h-100">
        <div class="col-md-1 text-center my-auto">
            <img src=https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552 border="0" style="max-height:100px">
        </div>

        <!-- Menu -->
        <div class="col-md-2 text-center my-auto">
            <div class="container">
                <div class="row">
                    <div class="col"><b>Menu1</b></div>
                </div>
                <div class="row">
                    <div class="col linkBlack">Menu2</div>
                </div>
                <div class="row">
                    <div class="col">Menu3</div>
                </div>
            </div>
        </div>

        <!-- Grid -->
        <div class="col-md-9 img-grid text-center" >
            <div class="container-fluid h-100 img-grid" style="overflow-y: scroll">

                <div class="row">
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                    <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
                        <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
                    </div>
                </div>


            </div>

        </div>
    </div>
</div>

</body>

CSS

.row {   margin: 0 !important; }

.img-grid {   padding-right: 0 !important;   padding-left: 0 !important; }

.text-inv {   opacity: 0;   transition: all 1s ease-in-out; }

.text-inv:hover {   background-color: white;   opacity: 1;   transition: all 1s ease-in-out; }

Couldn't post it on jsfiddle cause it doesn't work well with overflow-y, and code snippet won't show the problem with overflow-y.

Imgs:

https://prnt.sc/l5d8ip / https://prnt.sc/l5d8nb

Since I use overflow-y, the container on the right will have a scroll, but this scroll will be away from the margin leaving a gap, is there any way to make the overflow-y scroll become stick to the margin?

I use overflow-y soo the objects to the left won't move when a scroll is effectuated. If you have any way to reproduce this effect in a way the scroll bar become sticked to the margin that won't involve overflow-y, this will also work

The snippet will show your problem in expanded mode if it exists. Even if you think it doesn't, using code code blocks in the question has no benefits compared to using a snippet which can easily be copied to an answer. And the only removable gap on the right side is caused by the right padding on the `.container-fluid` element. And if you want to remove some scrollbar, see https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll. — Roope, Oct 12 '18 at 16:54
The snippet removes the scroll of the overflow-y cause it won't considere it as overflow. The gap that is show is where the normal scroll bar, but since the scroll bar is from a container that gap is still there. — Pbras, Oct 12 '18 at 17:06

score 1 · Accepted Answer · answered Oct 12 '18 at 17:04

The gap on the right side is the right padding of the container element. The snippet below removes is by simply setting the padding on that element to zero. Click on the full page link in the snippet to expand it.

.row {
  margin: 0 !important;
}

.img-grid {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.text-inv {
  opacity: 0;
  transition: all 1s ease-in-out;
}

.text-inv:hover {
  background-color: white;
  opacity: 1;
  transition: all 1s ease-in-out;
}

body > .container-fluid {
  padding-right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">

  <div class="container-fluid h-100">

    <!-- Logo -->
    <div class="row align-top h-100">
      <div class="col-md-1 text-center my-auto">
        <img src=https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552 border="0" style="max-height:100px">
      </div>

      <!-- Menu -->
      <div class="col-md-2 text-center my-auto">
        <div class="container">
          <div class="row">
            <div class="col"><b>Menu1</b></div>
          </div>
          <div class="row">
            <div class="col linkBlack">Menu2</div>
          </div>
          <div class="row">
            <div class="col">Menu3</div>
          </div>
        </div>
      </div>

      <!-- Grid -->
      <div class="col-md-9 img-grid text-center">
        <div class="container-fluid h-100 img-grid" style="overflow-y: scroll">

          <div class="row">
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
          </div>


          <div class="row">
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
          </div>


          <div class="row">
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
            <div class="col-md-4 d-table img-grid" style="background-image: url(https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest/scale-to-width-down/480?cb=20170330235552); background-size: cover; background-position: center; height:280px;">
              <div class="text-inv" style="display: table-cell; height: 280px; vertical-align: middle;">Nome</br>Produtor</br>Data</div>
            </div>
          </div>


        </div>

      </div>
    </div>
  </div>

</body>

Ahhhh, I was checking the second container and seeing no padding, the problem was on the first one. Thanks very much. — Pbras, Oct 12 '18 at 17:20

Overflow-y scrollbar leave a gap to the margin

1 Answers1