Body height 100% displaying vertical scrollbar

Question

Out of curiosity, considering the example below, why does having the margin on the #container div cause a vertical scrollbar to appear in the browser? The container is much

Answer 1

I found a quick solution: try set height to 99.99% instead of 100%

Answer 2

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

If you want to remove the body scrolling add the following style:

body {
    height: 100%;
    overflow: hidden;
}

Answer 3

adding float:left; is nice, but will interfere with central horizontal positioning using margin:auto;

if you know how big your margin is, you can account for that in your height percentage using calc:

height: calc(100% - 50px);

browser support is good, but only IE11+ https://caniuse.com/#feat=calc

Answer 4

html,body {
   height: 100%;
   margin: 0;
   overflow: hidden;
}

This worked for me

Answer 5

I have found a solution: add padding: 1px 0; to body prevents vertical scrollbars to appear

Answer 6

Inspired by @BoltClock, I tried this and it worked, even when zoom out and in.

Browser: Chrome 51

html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0px;
  position: relative;
  top: -20px;
}

I guess body was shifted down 20px.