Why my page in bigger than my window in html? [duplicate] - html

Question

http://codepen.io/basickarl/pen/Wrwdam?editors=110
html:
<div class="back">
</div>
css:
html,
body {
height: 100%;
}
div.back {
margin-top: 50px;
display: absolute;
width: 30px;
height: 30px;
background-image: url('http://simpleicon.com/wp-content/uploads/arrow-35.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
The scrollbar on the right displays. I have to have html, body at 100% because of a sticky footer I'm using. Any ideas?

Answer 1

the body element has a default margin: 8px; in most major browsers so first you have to remove that by resetting the margin property on the body element
body {
margin: 0;
}
Then, instead of using height: 100%; on the body use min-height: 100%; so that the body can also grow beyond 100% height when used in conjunction with overflow: hidden;
Since min-height doesn't work if the parent height isn't explicitly set, a height attribute has to be added to the html element as well.
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
overflow: hidden;
}
Also, your div.back selector has an invalid value on the display property. the display property accepts inline, inline-block, block, none, flex, inline-flex, grid etc... whereas the position property accepts static (default for every element), absolute, relative or fixed. This is not a problem but rather something the browser just ignores as it doesn't understand it.
div.back {
display: absolute; // <------ remove this line
//... snipped ...
}

Answer 2

It's partially because the default browser style sheets add some margins and/or padding. Resetting them to 0 will fix part of it (JSFiddle).
However you've also got a div with some margins applied (50px). The way the box-model works will mean you'll need to minus that from your 100%. You can use calc if you really need to (or just change it to padding):
height: calc(100% - 50px);
Example using the above code: http://codepen.io/anon/pen/mVPpYK
Example using padding: http://codepen.io/anon/pen/OMNzqB?

Answer 3

If you inspect element, you can see it because of back margin-top style.
Solution
Instead of margin-top, use top.
And then add margin: 0to your HTML/BODY.

Answer 4

There is another thought, even though some of these answers work. Set the body to have a margin of 0 and float the div to the left.
Example - Code Pen
html, body { height: 100%; margin: 0; }
div.back {
float: left;
margin-top: 50px;
width: 30px;
height: 30px;
background-image: url('http://simpleicon.com/wp-content/uploads/arrow-35.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

Answer 5

You should use overflow.
body {
height: 100%;
overflow:hidden;
}

Answer 6

Try using:
html, body {
height: 100%; overflow: hidden;
}