CODEWITHSUNDEEP
htmlcss
user2543623
user2543623

Reputation: 1562

100% height goes a few pixels off the page?

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>

Upvotes: 4

Views: 796

Answers (3)

Hezi-Gangina
Hezi-Gangina

Reputation: 649

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

Upvotes: 2

Hezi-Gangina
Hezi-Gangina

Reputation: 649

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.

Upvotes: 1

asdf
asdf

Reputation: 3067

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

Upvotes: 5

Related Questions