为什么会出现水平滚动条？答案

【问题标题】：Why horizontal scrollbar appears?为什么会出现水平滚动条？
【发布时间】：2021-07-13 13:35:23
【问题描述】：

我的网站由具有这些样式的部分组成：

.site-section{
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

当我打开网站时，会出现一个水平滚动条。我用::-webkit-scrollbar {display: none;} 隐藏了它，但这不是一个好的解决方案，因为并非所有浏览器都支持它。你知道为什么会出现这个问题吗？

【问题讨论】：

每页是否有超过 1 个部分？如果页面的高度超过 100vh，它将显示一个滚动条。这可能是<body> 的默认边距或任何其他原因。您可以右键单击您的页面并“检查”它以突出显示每个容器的表面，以更好地了解所有内容的放置位置以及导致额外高度的原因。
@leuquim，滚动条是因为body和html标签有边距和内边距造成的。

标签： html css scrollbar

【解决方案1】：

如果没有看到更多代码上下文，最可能的解释是您让浏览器使用其默认设置，这些设置可能包括边距和填充。

如果是这样，那么即使你只有这个元素作为第一个元素，它或主体，或两者等都会使你的元素移动一点，宽度为 100vw，这意味着它太宽了和/或高视口，因此出现滚动条。

把它放在你的 CSS 的顶部，看看它是否对你的特定场景有影响：

* {
  margin: 0;
  padding: 0;
}

【讨论】：

【解决方案2】：

水平滚动条是由你的 CSS 引起的：width: 100vw;。

要删除它，请将声明 overflow-x: hidden; 放在您的正文标签上。

【讨论】：

【解决方案3】：

你的水平滚动条是因为你的site-section有100vw的宽度。浏览器对此很好，但它也考虑了边距和填充（蓝色和红色）。

这会导致溢出，因此浏览器会添加一个水平滚动条（以及一个垂直滚动条）；

解决此问题的最佳方法是使用calc。

.site-section{
  background-color: lightblue; /* I added this so you can see the new extents of the .site-section */
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  width: calc(100vw - 16px);
  height: calc(100vh - 16px);
}

<div class = 'site-section'>
  Hello world
</div>

【讨论】：