为什么body元素溢出并导致垂直滚动？ [英] Why is the body element overflowing and causing vertical scroll?
本文介绍了为什么body元素溢出并导致垂直滚动？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在这里很困惑。因为body是100％（宽/高），主容器也是100％（width / height）。
I am very much confused here. Since the body is 100% (width/height) and main container is also 100% (width/height).
我创建了一个jsFiddle来解释情况。
http://jsfiddle.net/dcnnvgs1/1/
<body>
<div class="main-container">
<div class="main-header">HEADER</div>
<div class="main-content">something something</div>
<div class="main-footer">FOOTER</div>
</div>
</body>
CSS
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 标签默认有一个边距取决于浏览器的例子，在其 margin：8px 您必须透过
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;
}
查看更新小提琴
这篇关于为什么body元素溢出并导致垂直滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
