当身高为100vh时额外滚动条

Question

以下是我在网页上设置背景的方法：

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

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

两个问题：

1. 向页面添加背景是否正确？
2. 我应该如何摆脱不需要的滚动条？

Answer 1

您可以将overflow:hidden添加到正文以隐藏滚动条。

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

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

Answer 2

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

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

{{1}}

Answer 3

身体标签默认为上边距，下边距，左边，右边距8px。并且h1标签默认为margin-top和margin-bottom 21.440px或0.67em 所以你需要设置体边距：0和h1边距：0或边距顶部：0

如果你只想为整个身体设置背景颜色那就好了。如果你想了解更多关于背景属性的内容，请阅读CSS background Property

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

LocalDate

Answer 4

正如@Mostafa Baezid所说，存在body的默认边距。

此外，由于垂直轴上的 margin collasping ，您需要确保最顶部或最底端元素的边距不会塌陷，从而使该边距不会出现在父级之外。

此外，100vh != 100%和一些移动浏览器一样。移动浏览器的菜单栏会占用一些空间，100vh不会减少该空间。

该怎么办：

1. 删除body的边距（{{1}和margin-top就足够了）
2. 删除最上面的元素的margin-bottom和最下面的元素的margin-top。 （您可以改用margin-bottom）
3. 在移动设备上使用padding而不是height: 100%。