身体高度为 100vh 时的额外滚动条答案

【问题标题】：Extra scrollbar when body height is 100vh身体高度为 100vh 时的额外滚动条
【发布时间】：2017-08-16 05:58:37
【问题描述】：

这是我在网页上设置背景的操作：

body {
  height: 100vh;
  background: linear-gradient(white, tan);
}

<h1>Heading</h1>
<p>Paragraph</p>

两个问题：

【问题讨论】：

【解决方案1】：

正如@Mostafa Baezid 所说，默认边距为body。

另外，由于 margin collasping 在垂直轴上，您需要确保最顶部或最底部元素的边距不会折叠，从而将边距渲染到父级之外。

更重要的是，100vh != 100% 对于一些移动浏览器。移动浏览器的菜单栏占用了一些空间，100vh 并没有减少该空间。

那该怎么办：

【讨论】：

【解决方案2】：

body 标签的上、下、左、右的默认边距为 8px。 h1 标签默认为 margin-top 和 margin-bottom 21.440px 或 0.67em 所以你需要设置 body margin:0 和 h1 margin:0 或 margin-top:0

如果您只想为整个身体设置背景颜色，那很好。如果您想了解有关背景属性的更多信息，请阅读此CSS background Property

body {
  height: 100vh;
  background: green;
  margin:0;
}
h1{
 margin-top:0;
   
}

<h1>Heading</h1>
<p>Paragraph</p>

【讨论】：

【解决方案3】：

我不知道你想做什么，但你可以尝试像这样“溢出：隐藏”：

body {
  height: 100vh;
  background: green;
  overflow: hidden;
}

<h1>Heading</h1>
<p>Paragraph</p>

【讨论】：

【解决方案4】：

你可以在body中添加overflow:hidden来隐藏滚动条。

body {
  height: 100vh;
  background: green;
  overflow: hidden;
}

<h1>Heading</h1>
<p>Paragraph</p>

【讨论】：