CSS: Why do i have a scrollbar at 100% height?
<p>I am working on a page, which is separated into 4 <code>div</code>s, which add up to a 100% height. The container also uses 100% height and there are no margins or paddings defined.
So why does my page show a scrollbar?</p>
<p>Note that there is only one container shown not both, because of this javascript:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  var bgArr = ["image.jpg", "image.jpg", "image.jpg"];

  var i = 0;

  var $bg1 = $('.background-1').css('background-image', 'url(' + bgArr[0] + ')').css('left', '0%');
  var $bg2 = $('.background-2').css('background-image', 'url(' + bgArr[1] + ')').css('left', '-100%');

  var bgSlide = function($bg) {
    $bg.animate({
      left: '+=100%'
    }, 600, function() {
      if (parseInt($bg.css('left')) &gt; 0) {
        $bg.css('left', '-100%');
        (i &lt; bgArr.length - 1) ? i++ : i = 0;
        $bg.css("background-image", "url(" + bgArr[i] + ")");
      }
    });
  }

  setInterval(function() {
    bgSlide($bg1);
    bgSlide($bg2);
  }, 10000);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
  min-height: 100%;
}

#first_div {
  height: 5.5%;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid black;
}

#second_div {
  height: 31.5%;
  width: 100%;
  border-bottom: 1px solid black;
}

#third_div {
  width: 100%;
  height: 31.5%;
  border-bottom: 1px solid black;
}

#fourth_div {
  height: 31.5%;
  width: 100%;
}

body,
html,
#container {
  height: 100%;
  background-color: #f4f5f2;
}

body {
  position: relative;
  background: transparent;
  overflow-x: hidden;
  color: black;
}

h1 {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  line-height: 30px;
}

h3 {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  line-height: 15.4px;
}

p {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 19.99px;
  padding-left: 1em
}

blockquote {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 21px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 29.99px;
}

pre {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 18.57px;
}

.background-1,
.background-2 {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: transparent;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="background-1"&gt;
  &lt;div id="container"&gt;
    &lt;div id="first_div"&gt;
      &lt;h1&gt;Headline1&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div id="second_div"&gt;
      &lt;p&gt;&lt;b&gt;Text:&lt;/b&gt; Text&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="third_div"&gt;
      &lt;p&gt;&lt;b&gt;Room&lt;/b&gt; Text&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="fourth_div"&gt;
      &lt;p&gt;&lt;b&gt;Start:&lt;/b&gt; 10:45 Uhr&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;


&lt;div class="background-2"&gt;
  &lt;div id="container"&gt;
    &lt;div id="first_div"&gt;
      &lt;h1&gt;Headline2&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div id="second_div"&gt;
      &lt;p&gt;&lt;b&gt;Text:&lt;/b&gt; Text&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="third_div"&gt;
      &lt;p&gt;&lt;b&gt;Room&lt;/b&gt; Text&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="fourth_div"&gt;
      &lt;p&gt;&lt;b&gt;Start:&lt;/b&gt; 10:45 Uhr&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<blockquote>
<p>Here is the <a href="http://jsfiddle.net/6ngr7v8L/3/" rel="nofollow noreferrer">jsfiddle</a></p>
</blockquote>