html, body 100% causing scrollbar to appear

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?