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

Just for your information. 100vh can, and will, behave weird on mobile browsers. See: https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser — Daniel Z., Jun 20 '17 at 06:48

score 90 · Answer 1 · answered Jun 20 '17 at 06:39

90

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

answered Jun 20 '17 at 06:39

Mr.Pandya

1,899
1
13
24

2

In my case it did not helped me. Changing back to the default font in the footer did fix it though... So I added `height: 1.5rem` to the footer and it did the fix. I guess there is some edge on how vh/flex-grow compute the height with some fonts – Clément Baconnier Dec 19 '19 at 21:23

score 30 · Answer 2 · 2017-06-20T06:37:32.863

30

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

edited Jun 20 '17 at 06:37

answered Jun 20 '17 at 06:35

which part isn't ? – Jun 20 '17 at 06:37
@VijayKumarB He definitely is correct. Also keep in mind, that the body can have a margin. – Daniel Z. Jun 20 '17 at 06:40
Ok so you tell me I'm not correct because you think otherwise ? That's not really being open minded. And your answer is the same as mine for all I see. Thank you @DanielZiegler, didn't think about that ! – Jun 20 '17 at 06:42
No, 100vh means that your component height is 100% of the view. But it doesn't fit. Try adding some margin and padding, and tell me if it still fits. – Jun 20 '17 at 06:43
1

@VijayKumarB Yea. 100vh fits in the viewport. but 100vh + 3px border are higher than the the whole viewport. Dont know what to say else as your answers shows me you know something about the box model. But you should go and read it again – Daniel Z. Jun 20 '17 at 06:44
`box-sizing` **doesn't fit**, it just **tells the browser to take the padding and border into consideration when calculating the height** – Jun 20 '17 at 06:47
1

@VijayKumarB So... See? This answer is absolutely correct. Im out :'D – Daniel Z. Jun 20 '17 at 06:50
Why not use equivalent `vh` like instead of `px` ? eg. `97vh` ? – Akhilesh Mar 23 '21 at 18:15

score 9 · Answer 3 · answered Feb 10 '19 at 19:19

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

when i tried it giving margin and height for body it removed the scroll, thanks. But when i have given the height as 100% the div border if content is empty then the border line wont come till down — Learner, Nov 19 '19 at 05:55

score 7 · Answer 4 · answered Jun 20 '17 at 06:42

7

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

answered Jun 20 '17 at 06:42

Deepu Cherian

117
9

score 4 · Answer 5 · answered Jun 20 '17 at 06:44

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/

answered Jun 20 '17 at 06:44

DDan

8,068
5
33
52

score 0 · Answer 6 · answered Nov 22 '18 at 10:30

0

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;

}

answered Nov 22 '18 at 10:30

bhalaji

119
1
9

This creates unsightly effects if your element and the body have two different background colors or images. – Xavier Sep 17 '19 at 13:41
@jidu0106, I don't know what it is but this worked like a charm. – Dev Yego Jun 16 '20 at 08:19

score 0 · Answer 7 · answered Feb 11 '23 at 10:31

0

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

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

answered Feb 11 '23 at 10:31

Hüseyin Şahin

9
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 14 '23 at 21:46

score -2 · Answer 8 · answered Dec 17 '21 at 16:28

-2

I tend to encounter this problem alot my solution is a bit unorthodox but here it is

 body{
           height: 80vh;
            }

answered Dec 17 '21 at 16:28

Eseosa Osayi

38
4

2

I'm sorry, that's not just not a solution - it's kinda behind the point. If your client expects you to design a page, that fills the whole viewport, you cannot simply tell him/her to eff themselves and just fill 80% of it. Sorry, that's not even a proper workaround. – Igor Sep 16 '22 at 01:06

score -3 · Answer 9 · answered Jun 20 '17 at 06:36

-3

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 !

answered Jun 20 '17 at 06:36

Alex

457
6
12
27

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

9 Answers9

Linked

Related