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

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

本文关键字：高度 滚动条 100% 有一个 为什么 CSS      更新时间：2023-09-26

我正在处理一个页面，该页面分为 4 个div秒，加起来高度为 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>

这是 jsfiddle

这是因为浏览器采用默认边距和填充。首先像下面这样删除它。

* {
    margin: 0;
    padding: 0;
}

然后你的前三个div的边框为1px，将其删除。

border-bottom: 1px solid black;

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

31.5 + 31.5

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

小提琴

因为正文具有默认边距。

像这样重置它。

html, body {
  margin: 0;
}

要使边框包含在div 的高度内，请添加此

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

* {
    margin: 0;
    padding: 0;
}

或者你可以添加到 CSS 

overflow:hidden

尝试将溢出轴从 x 更改为 y

body {
    position: relative;
    background: transparent;
    overflow-y: hidden;
    color: black; 
}
相关文章：