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

Question

I want the content to take the full height of the browser window, but not beyond.

When using 100vh as the container height, I can see the vertical scrollbar appearin

Answer 1

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;
}

Answer 2

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%;
}

Answer 3

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

Answer 4

body {
  margin: 0;
}

.container {
  height: 100vh;
  border: 3px solid lightsteelblue;
  border-radius: 10px;
  box-sizing: border-box;
}

This did the trick. See and test it here: https://jsfiddle.net/ddan/jsenLgre/

Answer 5

Came across same scenario, some auto margins in browser causesthe vertical scroll bar to appear. Very simple workaround I came across is to use 99vh instead of 100vh

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

}

Answer 6

u can remove the scroll bar by overflow-y:hidden; and u should use calc function to remove ur header height example height: 100vh;

calc(100vh -20px) if ur header is 20px height. so u get the 100vh !