100% height goes a few pixels off the page?

Question

I'm trying to make a box 100% height of the page. But in both Chrome and IE, the following extends a few pixels off the bottom of the page so I have to scroll. Why? Why is there a scrollbar here?

  <!doctype html>
  <html >
  <head>
    <style type="text/css">
        html, body 
        {
            margin: 0px;
            padding: 0px;
            height: 100%; 
        }
        div {
            border:5px solid black;
            height: 100%;
        }
    </style>
  </head>
  <body >
    <div >This flows a few pixels off the bottom of the page</div>
  </body>
</html>

asdf · Answer 1 · 2015-09-08T00:23:32.873

5

It goes a few pixels off the page because you're including a 5px border. The body of the div is 100% the height of the page, but the border sits outside of that, adding 10px total height to the page alongside the 100% height. So, on a 1000px page the height of your div will be 1010px. Remove the border and it'll be exactly the right height.

div {
    height: 100%;
}

If you still want the border, but not the unwanted extra height you can use the box-sizing: border-box property to place it inside the boundaries of the div

div {
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

edited Sep 08 '15 at 00:23

answered Sep 08 '15 at 00:17

asdf

2,927
2
21
42

3

And if you want the border either way, add it inside the div, not on its edge, using this: http://stackoverflow.com/questions/9601357/ – Paulo Avelar Sep 08 '15 at 00:20
@PauloAvelar Thank you, updated to reflect your addition – asdf Sep 08 '15 at 00:23

score 2 · Answer 2 · answered Sep 08 '15 at 00:51

...and here is another alternative for you :

html,body 
{
    height:100%;
    margin:0;
    padding:0
}
div
{
    border:5px solid black;
    display:block;
    height:-moz-calc(100% - 10px);
    height:-webkit-calc(100% - 10px);
    height:calc(100% - 10px);
    width:calc(100% - 10px)
}

Enjoy!

score 1 · Answer 3 · answered Sep 08 '15 at 00:34

You can keep your current settings WITH 5px border by declare border-box property for all major browsers:

div
{
    height:100%;
    box-sizing:border-box !important;
    -moz-box-sizing:border-box !important;
    -webkit-box-sizing:border-box !important;
}

Since you are dealing with 100% div size it's highly recommended to add the !important so you won't get any conflict with other properties.

100% height goes a few pixels off the page?

3 Answers3