メインのコンテナに垂直スクロールがあるのはなぜですか？

ここでは非常に混乱しています。 bodyは100％（幅/高さ）で、main-containerも100％（幅/高さ）なので、なぜ垂直スクロールがありますか？ 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タグには余裕を持ってクロムに

body{ 
    margin:0; 
}

を経由して、あなたがそれを休ませる必要があり、そのmargin:8pxあなたはデフォルトをリセットする必要がfiddle

出典

2016-03-25 10:14:04

あなたが100％に体の幅を設定する必要はありません。

私は状況を説明するためにjsFiddleを作成しました。自動的に全幅になります。デフォルトで

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

すべてのブラウザがデフォルトのスタイルシートを持っています。基本的なスタイルセットを提供します。あなたがサンプルから見ることができるようにbody { margin: 8px; }が推奨されるデフォルトの設定で、https://www.w3.org/TR/CSS22/sample.html

：ここ

はW3Cからのサンプルのデフォルトのスタイルシートです。

height: 100%に余白スペースを追加すると、オーバーフローが発生します。

body { margin: 0; }を追加すると、デフォルトを上書きできます。

出典

2016-03-25 11:29:20

メインのコンテナに垂直スクロールがあるのはなぜですか？

答えて

関連する問題