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

Question

这是我在网页上设置背景所做的：

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

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

两个问题：

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

Answer 1

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

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

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

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

Answer 2

您可以在正文中添加

overflow:hidden

以隐藏滚动条。

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

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

Answer 3

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

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

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

Answer 4

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

body

。

此外，由于 margin collasping 在垂直轴上，您需要确保最顶部或最底部元素的边距不会折叠，从而使边距超出父元素。

更重要的是，

100vh != 100%

至于一些移动浏览器。移动浏览器的菜单栏占用了一些空间，

100vh

不会减少该空间。

那么该怎么做：

1. 删除

   body

   边距（

   margin-top

   和

   margin-bottom

   就足够了）
2. 移除最顶层元素的

   margin-top

   和最底层元素的

   margin-bottom

   。 （你可以用

   padding

   代替）
3. 使用

   height: 100%

   而不是

   height: 100vh;

   用于移动设备。

Answer 5

如果有人需要快速补救，我的解决方案很简单：从 100vh 的高度缩小到 80vh 的高度，去掉了垂直滚动条。注意：我尝试了其他建议，但没有一个对我有用。