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

Posted 2023-03-05

【中文标题】居中 div 中垂直滚动条覆盖的内容的右边缘

【英文标题】：Right edge of content covered by vertical scrollbar in centered div

【发布时间】：2020-12-01 03:57:38

【问题描述】：

我想创建一个居中弹出窗口，其中包含一个标题和一张或多张卡片。每张卡片包含一个小桌子。当卡片数量超出显示范围时，会出现一个垂直滚动条。 但有问题：垂直滚动条覆盖了卡片的右边缘。

行为取决于浏览器：

Chrome

：页面刷新时出现问题，调整页面大小后问题消失。

Firefox

：问题

更严重

，因为它不会在页面调整大小时消失。还有一个水平滚动条。

重现问题的 html+CSS 代码：

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

上面的 sn-p 查看器在 Chrome 中没有显示问题，所以这里有一个jsfiddle test page：

打开jsfiddle页面， 按F5刷新（出现问题），然后 调整结果区域的大小（问题消失）。

---

更新

最后还是用了@Rayees-AC原来的思路：把overflow-y: auto改成了overflow-y: scroll。他的其他想法（完全隐藏滚动条或删除white-space: nowrap）在我的情况下无法使用。我很感谢他和 @Giant-Realistic-Flying-Tiger 解决这个问题！

【问题讨论】：

空白；nowrap 是罪魁祸首。我不知道为什么，但可能涉及复杂的计算

你检查过this medium post吗？

【参考方案1】：

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

---

我更改了下面的代码。

div#content 
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;

div#content::-webkit-scrollbar  
  display: none; /* Safari and Chrome */

我添加了另一个名为 class wrapper 的 div

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

试试这个 sn-p

* 
  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 - 不滚动的自动小内容

---

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

【讨论】：

@kol 请检查。如果有任何变化inbox我

这行得通，但不幸的是，即使不需要滚动条，滚动条也会出现......我会在接受你的之前等待其他答案。

请立即查看@kol

现在可以在 Firefox 和 Chrome 中使用，不存在滚动条

有趣的想法...我不知道滚动条可以完全隐藏。但这也不能解决问题，因为如果（且仅当）必须滚动卡片时，我想显示滚动条。无论如何感谢您的努力！

【参考方案2】：

仅对 Firefox 使用 padding-right 和 overflow:hidden。这非常有效。

我也看不出 Chrome 有什么问题。

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


/* check firefox browser */
@-moz-document url-prefix() 
  div#content
    overflow-x: hidden;
  
  
  div.card 
    padding-right:25px; /* 10px card padding + 15px firefox scrollbar width  */
  

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

【讨论】：

谢谢你，有趣的想法。但问题是每次打开弹出窗口时卡片的数量都可能不同，当数量太少不需要滚动时，您的解决方案仍然保持较大的右侧填充。