Extra scrollbar when body height is 100vh

Question

Here's what I did to set a background on the web page:

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

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

Two questions:

1. Is it the right approach to add a background to your page?
2. How should I get rid of the unwanted scrollbar?

Answer 1

You can add overflow:hidden to body to hide the scrollbar.

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

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

Answer 2

body tag by default margin 8px for top, bottom, left, right. And h1 tag by default margin-top and margin-bottom 21.440px or 0.67em so you need to set the body margin:0 and h1 margin:0 or margin-top:0

if you want to set only background color for the whole body its fine. if you want to know more about background property then read this CSS background Property

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

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

Answer 3

I don't know what you want to do but you can try "overflow : hidden" like this :

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

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

Answer 4

As @Mostafa Baezid said, there are default margins of body.

Also, due to margin collasping on the vertical axis, you need to ensure that the topmost or downmost element's margin doesn't collapse, rendering the margin out of the parent.

What's more, 100vh != 100% as for some mobile broswers. The menu bar of mobile browsers takes up some space and 100vh doesn't reduce that space.

So what to do:

1. Remove body margin (margin-top and margin-bottom would be enough)
2. Remove the topmost element's margin-top and the downmost element's margin-bottom. (you can use padding instead)
3. Use height: 100% instead of height: 100vh; for mobile.

Answer 5

In case someone needs a quick remedy, my solution is simple: Downsize from the height of 100vh to the height of 80vh got rid of the vertical scroll bar. Note: I tried other suggestions but none worked for me.