100vh doesn't take whole screen [closed]

Question

I want to create a one-scroll-page, like each section is full height from screen.

But when I use 100vh, it doesn't take whole screen height, but more like 95%.

Answer 1

Adding the code below to your CSS should fix it:

html,body{
margin:0;
}

This is caused by the default margin being 8px so redefining it using CSS will correct it.

Illustration with margin Set:

#Orange{
  height:100vh;
  width:100vw;
  background:orange;
}
body{
  margin:0;
  padding:0;
}

<div id="Orange"></div>

Without the margin:0 adjustment:

#Orange{
  height:100vh;
  width:100vw;
  background:orange;
}
body{
  padding:0;
}

<div id="Orange"></div>

EDIT

Adding this code should adjust the margins for your container.

.container-fluid{
    margin-top: 0;
    margin-bottom: 0;
}