Overflow-y scrollbar leave a gap to the margin

Pbras

New Member
#1
I have the following code:

HTML
Mã:
<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
Mã:
.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
 

Admin

Administrator
Thành viên BQT
#2
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.
Mã:
.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;
}
Mã:
<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>
 
OP
OP
P

Pbras

New Member
#3
Ahhhh, I was checking the second container and seeing no padding, the problem was on the first one. Thanks very much.
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Chủ Đề Xem Nhiều

Top