When using "height: 100vh" for the container, vertical scrollbar appears

Question

By default body and html are assigned to margin or padding to some pixels. Try using following code.

1vh = 1% of veiwport height 100vh = 100% of height.

So never calculate height - 3px. like this

body,html {
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
}

The issue is that you have a border with it, and like padding, you have to add it to your height.

Either you use this :

.container {
    height: calc(100vh - 3px);
}

Or this :

.container {
    height: 100vh;
    border: 3px;
    box-sizing: border-box;
}

use
body{
    margin :0px;
}
and
.container {
    height: 100vh;
    border: 3px;
    box-sizing: border-box;
}

There is a user agent stylesheet that gets added to any web document, it's nothing but default set of style that each browser applies to the documents being viewed, however these rules have the a very lower precedence order. Of course the author can over ride these rules, and they do very often.

As of today, google chrome, adds 8px margin to your document if not added or over written by the author.

So let's consider you added a div in your entire HTML document called .container in your case. You may try doing something like this.

body {
    margin: 0;
    height: 100vh;
}
.container {
    height: 100%;
    //if you want to add border to this container,
    border: 1px solid cyan;
    box-sizing: border-box;
}

Further if you have any other divs inside the container, they would take advantage of .container class 100vh value. You can assign 70% height to .page-content and 30% height to .footer div.

.page-content {
     height: 70%
     border: 1px solid aquablue;
     box-sizing: border-box;
}
.footer {
     height: 30%;
}