CSS：爲什麼我有一個100％高度的滾動條？

我在一個頁面上工作，它被分成4個div，它們的合計高度爲100％。容器也使用100％的高度，並且沒有定義邊距或填充。那麼，爲什麼我的網頁顯示滾動條？CSS：爲什麼我有一個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。

來源

2016-03-21 Fynn

：100 ''容器'的％'' –

否則內容不會延伸到整個頁面，四個不同的div實際上不會是p的5％和31.5％年齡，只有容器 – Fynn

這是因爲瀏覽器默認情況下服用margin和padding。首先像下面這樣刪除它。

* { 
    margin: 0; 
    padding: 0; 
}

然後你的第一個三個div有1px的邊界將其刪除。

border-bottom: 1px solid black;

因爲你的所有四個DIV高度一共是這樣的：

31.5 + 31.5 + 31.5 + 5.5 = 100％+ 1像素* 3邊界

Fiddle

來源

2016-03-21 10:13:48 ketan

@Fynn正如我在我的回答建議 – LGSon

@Fynn如果不想滾動條然後一種方式是給第一個div高度：'高度：calc（5.5％-3px）;' – ketan

@Ketan謝謝工作！ – Fynn

嘗試從X更改溢出軸爲y

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

來源

2016-03-21 10:13:30

因爲身體有默認的邊距。

這樣做來重置它。

html, body { 
    margin: 0; 
}

爲了使邊框可以在您的div的高度範圍內，添加此

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

來源

2016-03-21 10:15:54 LGSon

* { 
    margin: 0; 
    padding: 0; 
}

爲什麼你定義了'的高度，你可以添加到CSS

overflow:hidden

來源

2016-03-21 10:19:27

CSS：爲什麼我有一個100％高度的滾動條？

回答

相關問題