不需要的滚动条右边距答案

【问题标题】：unwanted scrollbar right margin不需要的滚动条右边距
【发布时间】：2019-12-12 16:28:40
【问题描述】：

在我的远程服务器和本地主机上，使用overflow-scroll 附加到我的容器的滚动条似乎在右侧有一个边距，这导致背景颜色显示出来。

这里 - 在代码 sn-p 上 - 代码是相同的，但没有这样的余量。

编辑：行为扩展

当浏览器调整大小时，背景颜色会随着元素调整大小而在滚动条的右侧闪烁。

此外，当鼠标以窗口宽度释放时，其中背景不显示在元素的右侧，该行为在下一次调整大小时仍然存在。但是，当鼠标以窗口宽度释放时，其中背景显示在元素的右侧，滚动条会跳到右侧以覆盖背景并将其自身对齐到它所属的右边缘，然后在刷新浏览器之前，该行为似乎对于所有未来的调整大小都是固定的。

此外，每次刷新时都不会出现该行为。它似乎是随机的，每 2-3 次刷新大约 1 次。

那么，为什么在调整大小时背景颜色会显示在滚动条的右侧？为什么在显示背景时释放鼠标会暂时解决除非页面刷新的问题？

*{
	margin:0;
	padding:0;
}
.grida{
	display:grid;
	grid-template-columns:14% 1fr 1fr;
	height:calc(100vh - 52px);
}
.bpart{
	height:calc(100vh - 52px);
	overflow-y:scroll;
	background:blue;
}

<div class='grida'>
<div class='gridaa'></div>

<div class='gridab'>
<div class='bpart'></div>
</div>

<div class='gridac'></div></div>

【问题讨论】：

我没有看到任何右边距空间。你能附上一些截图来理解吗？
@KaruppiahRK，我提供了远程服务器的链接。滚动条右侧有一条细的垂直蓝线。
@qadenza 现在有一条细蓝线在哪里？我什么也没看到。
@Claire 调整百分比时可以看到细线grid-template-columns: 13% 1fr 1fr。我认为这条细线出现在某些屏幕分辨率中。默认情况下，我也没有看到细线。我的屏幕分辨率是 1440x900。

标签： html css grid scrollbar css-grid

【解决方案1】：

不确定是什么原因，但导致它的 css 是这个

* {
    margin: 0;
    padding: 0;
}

我能够通过指定为零的边距来修复它（不包括margin-right）

喜欢这个

* {
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    padding: 0;
}

【讨论】：

【解决方案2】：

这确实是一种非常奇怪的行为，我必须承认我花了很长时间试图弄清楚这一点。不要害怕，下面有针对您的具体问题的解决方案，尽管回答您的问题对我提出了更多问题。

据我所知，您只是在观察像素舍入行为，这在所有浏览器中调整固定宽度与流体宽度元素的大小时都很自然。我看到的“垂直线”仅在调整浏览器窗口大小时出现。无论grid-template-columns 值设置为什么，在给定当前标记和样式的情况下，您将永远无法在所有断点处满足浏览器的固定宽度。

这可以通过非常简单的数学来证明：

让 x = 浏览器宽度 (px)
让 y = 流体网格宽度值 (%)
让 z = 流体网格实际宽度值 (px)
z = x(y)

考虑以下几点：

x = 1500 像素
y = 15%
1500(.15) = 225

如果您的网格宽度设置为 15%，则当浏览器窗口正好为 1500 像素时，网格元素将是 225 像素宽，并且不会溢出到相邻像素中。然而，当浏览器缩小到 1497 像素，然后再调整到 1496 像素时，它必须选择从 224.55 像素移动到 224.4 像素的网格元素的完整像素宽度。这似乎抵消了溢出容器内的滚动条，由于某种原因（希望有更多知识的人可以解释）在调整大小时不会粘在容器的右侧。一旦建立了新的宽度，滚动条就会自行重置到容器的右侧。这确实是一种奇怪的行为，如果有人能扩展我的答案来解释为什么首先存在这种行为，我会很高兴。

就解决方案而言，我相信我有一个：

只需在您的bpart div 中添加一个全宽、全高的元素并将背景分配给该元素，而不是成为父元素的bpart。此外，最重要的是，bpart 保留了 scroll 属性，而它的新子元素将具有 overflow:hidden 属性。

您的新标记如下所示：

<div class='grida'>

  <div class='gridaa'></div>

  <div class='gridab'>
    <div class='bpart'>
      <div class="bpart-inner"></div>
    </div>
  </div>

  <div class='gridac'></div>

</div>

还有你的 CSS：

* {
  margin:0;
  padding:0;
}
.grida {
  display:grid;
  grid-template-columns:14% 1fr 1fr;
  height:calc(100vh - 52px);
}
.bpart {
  height:calc(100vh - 52px);
  overflow-y:scroll;
}
.bpart-inner {
  height:100%;
  width:100%;
  overflow:hidden;
  background:blue;
}

据我所知，这很有效。这是一个小提琴：

https://jsfiddle.net/x6eL5mun/4/

就像我说的，我无法解释默认行为。如果有人可以，那么我和你一样感兴趣。否则，此解决方案应该为您完成。感谢您在这里激起我的兴趣。

【讨论】：

【解决方案3】：

这可能太简单了，我正在使用“CSS Grids”，但右侧有烦人的空间，导致水平滚动需要一个按钮。至少在我的情况下，这就是我所做的事情。将宽度设置为 99%。去图吧。

body {
    height: 650px;
    width: 99%; 
    background-color: gray;
}

【讨论】：