CSS:为什么我有一个100%高的滚动条？

Question

我正在做一个页面，它被分割成4个divs，它们加在一起达到100%的高度。容器也使用100%的高度，并且没有定义边距或垫子。那么为什么我的页面会显示一个滚动条呢？

请注意，只有一个容器显示，而不是两者都显示，因为这个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>

​

这是小提琴

Answer 1

这是因为浏览器采用默认的边距和填充。首先，移除它，如下所示。

* {
    margin: 0;
    padding: 0;
}

然后您的前三个div的边框为1px，移除它。

border-bottom: 1px solid black;

因为你所有的四个div总高度都是：

31.5 + 31.5 + 31.5 + 5.5 = 100% +1 1px *3边界

小提琴

Answer 2

因为身体有一个默认的保证金。

就像这样重新设置它。

html, body {
  margin: 0;
}

若要将边框包括在div的高度中，请添加以下内容

#first_div,
#second_div,
#third_div {
  box-sizing: border-box;
}

Answer 3

* {
    margin: 0;
    padding: 0;
}

也可以添加到css中。

overflow:hidden