CODEWITHSUNDEEP
css
cookya
cookya

Reputation: 3297

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

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 appearing.

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

What could be the issue?

EDIT: more detailed code:

CSS

html, body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.container {
  height: 100vh;
  margin: 0px;
  padding: 0px;
}

.page_content {
  height: 85vh;
  width: 95vw;
  border: 3px solid lightsteelblue;
  border-radius: 10px;
  overflow-y: auto;
  margin: 0 auto;
}

.footer {
  height: 14vh;
  width: 95vw;
  margin: 0px auto;
  padding: 0px;

}

HTML

<html>
   <body>
     <div class="container">
        <div class="page_content">
          ...
        </div>
        <div class="footer">
         ...
        </div>
     </div>
   </body>
</html>

Upvotes: 116

Views: 172803

Answers (8)

Deepu Cherian
Deepu Cherian

Reputation: 137

Use:

body {
    margin: 0px;
}

and

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

Upvotes: 9

H&#252;seyin Şahin
H&#252;seyin Şahin

Reputation: 9

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

If you write this at the beginning of your codes, your problem will be fixed.

Upvotes: 0

Ashish Singh
Ashish Singh

Reputation: 754

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

Upvotes: 10

bhalaji
bhalaji

Reputation: 137

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;

}

Upvotes: -1

DDan
DDan

Reputation: 8276

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/

Upvotes: 4

Mr.Pandya
Mr.Pandya

Reputation: 2038

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

Upvotes: 102

user4676340
user4676340

Reputation:

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

Upvotes: 31

Alex
Alex

Reputation: 467

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 !

Upvotes: -3

Related Questions