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

我正在做一个页面，它被分成4个分区，加起来有100%的高度。容器也使用100%的高度，并且没有定义边距或填充物。 那么为什么我的页面会显示一个滚动条呢

CSS:

HTML:

<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>

头条新闻1
文本：文本

房间文本

出发时间：10时45分

头条新闻2
文本：文本

房间文本

出发时间：10时45分

请注意，由于此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);
});

$（文档）.ready（函数（）{
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 bglide=函数（$bg）{
$bg.animate（{left:'+=100%}，600，function（）{
if（parseInt（$bg.css（'left'））>0）{
$bg.css（'左'，'-100%'）；
（i

---

这是你的电话号码

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

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

---

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

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

---

这是因为浏览器使用默认的边距和填充。首先，按如下方式移除它

* {
    margin: 0;
    padding: 0;
}

然后，您的前三个div（边框为1px）将其删除

border-bottom: 1px solid black;

因为您的四个分区的总高度如下所示：

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

---

这是因为浏览器使用默认的边距和填充。首先，按如下方式移除它

* {
    margin: 0;
    padding: 0;
}

然后，您的前三个div（边框为1px）将其删除

border-bottom: 1px solid black;

因为您的四个分区的总高度如下所示：

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

---

因为主体有一个默认的边距

这样做可以重置它

html, body {
  margin: 0;
}

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

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

或者您可以添加到css

overflow:hidden

或者您可以添加到css

overflow:hidden

---

为什么定义了

height:100%

of

#container

，否则内容不会延伸到整个页面，四个不同的div实际上不会占页面的5%和31.5%，仅限于容器为什么您定义了

容器的
高度：100%
，否则内容不会延伸到整个页面，四个不同的div实际上不会占页面的5%和31.5%，只有container@Fynn正如我在报告中建议的那样answer@Fynn如果不需要滚动条，一种方法是给出第一个div的高度，比如：
height:calc（5.5%-3px）
@Fynn是的，另一种方法是LGson建议的。@Fynn需要注意的是，
*{margin:0；padding:0；}
规则去掉了所有元素的边距/填充，如
ul
/
li
等answer@Fynn如果不需要滚动条，一种方法是给出第一个div的高度，比如：
height:calc（5.5%-3px）；
@Fynn是的，另一种方法是按照LGson的建议。@Fynn需要注意的是，
*{margin:0；padding:0；}
规则去掉所有元素的边距/填充，如
ul
/
li
等。