为什么在主容器上有垂直滚动？ [英] Why is there vertical scroll on the main container?
本文介绍了为什么在主容器上有垂直滚动？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
body 是100％（width / height），而 main-container 也是100％ ，为什么会出现垂直滚动？ 我创建了一个jsFiddle来解释情况： http://jsfiddle.net/dcnnvgs1/1/
body，html {width：100％;身高：100％ font-family：Trebuchet MS！important; background-color：＃00b3b3;}。main-container {display：flex; flex-direction：column; flex-wrap：nowrap;身高：100％宽度：100％; box-sizing：border-box;}。main-header {background-color：＃099; height：10％;}。main-footer {background-color：＃099; height：10％;}。main-content {background-color：#fff; < body>的高度：100％;}
/ p>
解决方案默认情况下，
$ b
身体例如在chrome中它的 margin：8px 你必须通过$ / $> $ b
body {
margin：0;
}
查看更新小提琴
I am very much confused here. Since the body is 100% (width/height) and main-container is also 100% (width/height), why is there vertical scroll?
I created a jsFiddle to explain the situation: 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>
Thanks guys
解决方案
the body tag by default has a margin depend on the browser as example in chrome its margin:8pxyou have to rest it via
body{
margin:0;
}
see updated fiddle
这篇关于为什么在主容器上有垂直滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
