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

【问题标题】：Right edge of content covered by vertical scrollbar in centered div居中 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吗？

标签： html css layout scrollbar centering

【解决方案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>

【讨论】：

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