CSS: Why do i have a scrollbar at 100% height?

Issue

I am working on a page, which is separated into 4 divs, 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?

Note that there is only one container shown not both, because of this javascript:

$(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')) > 0) {
        $bg.css('left', '-100%');
        (i < bgArr.length - 1) ? i++ : i = 0;
        $bg.css("background-image", "url(" + bgArr[i] + ")");
      }
    });
  }

  setInterval(function() {
    bgSlide($bg1);
    bgSlide($bg2);
  }, 10000);
});

#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;
}

<div class="background-1">
  <div id="container">
    <div id="first_div">
      <h1>Headline1</h1>
    </div>
    <div id="second_div">
      <p><b>Text:</b> Text</p>
    </div>
    <div id="third_div">
      <p><b>Room</b> Text</p>
    </div>
    <div id="fourth_div">
      <p><b>Start:</b> 10:45 Uhr</p>
    </div>
  </div>
</div>


<div class="background-2">
  <div id="container">
    <div id="first_div">
      <h1>Headline2</h1>
    </div>
    <div id="second_div">
      <p><b>Text:</b> Text</p>
    </div>
    <div id="third_div">
      <p><b>Room</b> Text</p>
    </div>
    <div id="fourth_div">
      <p><b>Start:</b> 10:45 Uhr</p>
    </div>
  </div>
</div>

Here is the jsfiddle

Solution

It is because browser taking default margin and padding. First remove it like following.

* {
    margin: 0;
    padding: 0;
}

Then your first three div having border of 1px remove it.

border-bottom: 1px solid black;

Because your all four div height total is like:

31.5 + 31.5 + 31.5 + 5.5 = 100% + 1px * 3 border

Fiddle

Answered By - ketan