Question

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

CSS：

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

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>

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

这是jsfiddle。

Answer 1

这是因为浏览器采用默认保证金和填充。首先将其删除，如下所示。

* {
    margin: 0;
    padding: 0;
}

然后你的前三个div有1px的边框删除它。

border-bottom: 1px solid black;

因为你的所有四个div总高度如下：

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

<强> Fiddle

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

Answer 4

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

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

CSS：为什么我的滚动条高度为100％？

4 个答案: