您的位置: 首页  >  技术问答  >  居中div中垂直滚动条覆盖的内容的右边缘

居中div中垂直滚动条覆盖的内容的右边缘

分类: 技术问答 • 2022-07-26 12:59:15
问题描述：

我想创建一个带有标题和下面一个或多个卡片的居中弹出窗口.每张卡都包含一张小桌子.如果显示的卡数过多，则会出现垂直滚动条.但是有问题:垂直滚动条覆盖了卡片的右边缘.

I'd like to create a centered popup with a title and one or more cards under it. Each card contains a small table. When there are more cards than can be displayed, a vertical scrollbar appears. But there is problem: the vertical scrollbar covers the right edge of the cards.

行为取决于浏览器:

  • Chrome :该问题在刷新页面时出现，但在调整页面大小时消失.
  • Firefox :问题很严重，因为它在页面调整大小时不会消失.还有一个水平滚动条.
  • Chrome: The problem appears when the page is refreshed, but disappears when the page is resized.
  • Firefox: The problem is more serious, because it doesn't disappear on page resize. There is also a horizontal scrollbar.

重现此问题的HTML + CSS代码:

The HTML+CSS code that reproduces the problem:

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
}

html,
body {
  height: 100%;
  min-height: 500px;
}

div#container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 500px;
  background: coral;
}

div#frame {
  padding: 15px;
  background: lightgreen;
}

h1 {
  margin-bottom: 10px;
  font-size: 20px;
}

div#content {
  max-height: 300px;
  overflow-y: auto;
  background: lightblue;
}

div.card {
  display: table;
  padding: 10px;
  background: lightyellow;
  font-size: 15px;
}

div.card:not(.last-card) {
  margin-bottom: 5px;  
}

table {
  border-collapse: collapse;
}

td {
  padding: 5px;
  background: lightpink;
  white-space: nowrap;
}

<div id="container">
  <div id="frame">
    <h1>Frame Title</h1>
    <div id="content">
      <div class="card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!---->
      <div class="card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="card last-card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

以上代码段查看器在Chrome中未显示问题，因此这是 jsfiddle测试页可以做到

The above snippet viewer does not show the problem in Chrome, so here is a jsfiddle test page which does:

  • 打开jsfiddle页面，
  • 按F5刷新它(出现问题)，然后
  • 调整结果区域的大小(问题消失了).

更新

最后，我使用了@ Rayees-AC的原始想法:我将 overflow-y:auto 更改为 overflow-y:scroll .他的其他想法(完全隐藏滚动条或删除 white-space:nowrap )在我的情况下无法使用.我感谢他和@ Giant-Realistic-Flying-Tiger致力于解决这个问题！

In the end I used the original idea of @Rayees-AC: I changed overflow-y: auto to overflow-y: scroll. His other ideas (hiding the scrollbar entirely or removing white-space: nowrap) couldn't be used in my case. I'm grateful for him and @Giant-Realistic-Flying-Tiger for working on this problem!

答

#1 -不显示滚动条滚动已启用

#1 - Without showing scrollbarscroll enabled

我更改了以下代码.

div#content {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;
}
div#content::-webkit-scrollbar { 
  display: none; /* Safari and Chrome */
}

我添加了另一个名为class wrapper

I added another div named class wrapper

.wrapper{
      width: 100%;
      height: 100%;
      overflow: hidden;
}

尝试此代码段 

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
}

html,
body {
  height: 100%;
  min-height: 500px;
}

div#container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 500px;
  background: coral;
}

div#frame {
  padding: 15px;
  background: lightgreen;
}

h1 {
  margin-bottom: 10px;
  font-size: 20px;
}
.wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
div#content {
  max-height: 300px;
  overflow-y: auto;
  background: lightblue;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;
}
div#content::-webkit-scrollbar { 
  display: none;
}

div.card {
  display: table;
  padding: 10px;
  background: lightyellow;
  font-size: 15px;
}

div.card:not(.last-card) {
  margin-bottom: 5px;  
}

table {
  border-collapse: collapse;
}

td {
  padding: 5px;
  background: lightpink;
}

<div id="container">
  <div id="frame">
    <h1>Frame Title</h1>
    <div class="wrapper">
    <div id="content">
      <div class="card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!---->
      <div class="card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="card last-card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  </div>
</div>

#2 -不滚动的小内容自动出现

#2 - Automatically small content not scrolling

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
}

html,
body {
  height: 100%;
  min-height: 500px;
}

div#container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 500px;
  background: coral;
}

div#frame {
  padding: 15px;
  background: lightgreen;
}

h1 {
  margin-bottom: 10px;
  font-size: 20px;
}
.wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
div#content {
  max-height: 300px;
  overflow-y: auto;
  background: lightblue;
}


div.card {
  display: table;
  padding: 10px;
  background: lightyellow;
  font-size: 15px;
}

div.card:not(.last-card) {
  margin-bottom: 5px;  
}

table {
  border-collapse: collapse;
}

td {
  padding: 5px;
  background: lightpink;
}

<div id="container">
  <div id="frame">
    <h1>Frame Title</h1>
    <div id="content">
      <div class="card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

#3 -大量内容可滚动

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
}

html,
body {
  height: 100%;
  min-height: 500px;
}

div#container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 500px;
  background: coral;
}

div#frame {
  padding: 15px;
  background: lightgreen;
}

h1 {
  margin-bottom: 10px;
  font-size: 20px;
}
div#content {
  max-height: 300px;
  overflow-y: auto;
  background: lightblue;
}

div.card {
  display: table;
  padding: 10px;
  background: lightyellow;
  font-size: 15px;
}

div.card:not(.last-card) {
  margin-bottom: 5px;  
}

table {
  border-collapse: collapse;
}

td {
  padding: 5px;
  background: lightpink;
}

<div id="container">
  <div id="frame">
    <h1>Frame Title</h1>
    <div id="content">
      <div class="card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!---->
      <div class="card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="card last-card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

相关推荐