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

css

Solution

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

Problem

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

Original source

Related problems