爲什麼主容器上有垂直滾動？

我在這裏非常困惑。由於body是100％（寬度/高度），並且main-container也是100％（寬度/高度），爲什麼會有垂直滾動？爲什麼主容器上有垂直滾動？

我創建了一個的jsfiddle說明情況：http://jsfiddle.net/dcnnvgs1/1/

body, 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
    font-family: "Trebuchet MS !important"; 
 
    background-color: #00b3b3; 
 
} 
 

 
.main-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: nowrap; 
 
    height: 100%; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
.main-header { 
 
    background-color: #099; 
 
    height: 10%; 
 
} 
 

 
.main-footer { 
 
    background-color: #099; 
 
    height: 10%; 
 
} 
 

 
.main-content { 
 
    background-color: #fff; 
 
    height: 100%; 
 
}

<body> 
 
    <div class="main-container"> 
 
    <div class="main-header">HEADER</div> 
 
    <div class="main-content">jecechejbhcbjbcjrbjb bbjbhbbk</div> 
 
    <div class="main-footer">FOOTER</div> 
 
    </div> 
 
</body>

謝謝你們

來源

2016-03-25 Sachin

的body標籤在默認情況下有一個保證金取決於Chrome的瀏覽器爲例其margin:8px您通過

body{ 
    margin:0; 
}

休息查閱更新fiddle

來源

2016-03-25 10:14:04

您不必車身寬度設置爲100％。它會自動採取全寬。

body,html{ 
/*width:100%;*/ 
height:100%; 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
font-family:"Trebuchet MS !important"; 
background-color:#00b3b3; 
}

來源

2016-03-25 10:11:20 WisdmLabs

雖然這是真的，但它不是問題的答案。考慮張貼評論。 –

你必須重新設置默認身體邊際。

body,html{ 
width:100%; 
height:100%; 
font-family:"Trebuchet MS !important"; 
background-color:#00b3b3; 
    margin:0px; //reset default body margin 
}

每個標籤都有它的默認css屬性，這取決於瀏覽器。

來源

2016-03-25 10:14:40

添加到您的代碼：

body { margin: 0; }

所有瀏覽器都有一個默認樣式表。它提供了一組基本的樣式。

下面是來自W3C的樣本默認樣式表：https://www.w3.org/TR/CSS22/sample.html

你可以從樣本看，body { margin: 8px; }是推薦的默認設置。

當您將該空白空間添加到您的height: 100%時，會導致溢出。

因此，添加body { margin: 0; }以覆蓋默認值。

來源

2016-03-25 11:29:20

爲什麼主容器上有垂直滾動？

回答

相關問題