溢出-y 滚动条在边缘留有空隙

【问题标题】：Overflow-y scrollbar leave a gap to the margin溢出-y 滚动条在边缘留有空隙
【发布时间】：2018-10-13 01:04:23
【问题描述】：

我有以下代码：

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; }

无法在 jsfiddle 上发布它，因为它不适用于 overflow-y，并且代码 sn-p 不会显示 overflow-y 的问题。

图片：

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

由于我使用overflow-y，所以右边的容器会有一个滚动条，但是这个滚动条会离开边缘留下一个空隙，有什么办法可以让overflow-y滚动条粘在边缘？

我使用overflow-y 所以当滚动生效时左侧的对象不会移动。如果您有任何方法以滚动条粘在不涉及overflow-y 的边距的方式重现此效果，这也将起作用

【问题讨论】：

  • 如果存在，sn-p 会以扩展模式显示您的问题。即使您认为没有，与使用可以轻松复制到答案的 sn-p 相比，在问题中使用代码代码块也没有任何好处。右侧唯一可移除的间隙是由.container-fluid 元素上的右侧填充造成的。如果您想删除一些滚动条，请参阅stackoverflow.com/questions/16670931/…。
  • sn-p 删除溢出的滚动，因为它不会将其视为溢出。显示的间隙是正常滚动条的位置，但由于滚动条来自容器，因此间隙仍然存在。

标签： html css bootstrap-4


【解决方案1】：

右边的空隙是容器元素的右边距。下面删除的 sn-p 只需将该元素上的填充设置为零即可。点击sn-p中的整页链接将其展开。

.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>

【讨论】：

  • 啊，我正在检查第二个容器并没有看到任何填充，问题出在第一个容器上。非常感谢。
猜你喜欢
  • 2020-02-02
  • 1970-01-01
  • 1970-01-01
  • 2019-08-04
  • 2016-05-14
  • 1970-01-01
  • 2020-01-14
  • 1970-01-01
  • 2020-02-10
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode