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

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.