When using "height: 100vh" for the container, vertical scrollbar appears
CssCss Problem Overview
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>
Css Solutions
Solution 1 - Css
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;
}
Solution 2 - Css
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;
}
Solution 3 - Css
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%;
}
Solution 4 - Css
use
body{
margin :0px;
}
and
.container {
height: 100vh;
border: 3px;
box-sizing: border-box;
}
Solution 5 - Css
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/
Solution 6 - Css
I tend to encounter this problem alot my solution is a bit unorthodox but here it is
body{
height: 80vh;
}
Solution 7 - Css
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;
}
Solution 8 - Css
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 !