为什么主容器上有垂直滚动? [英] Why is there vertical scroll on the main container?
本文介绍了为什么主容器上有垂直滚动?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在这里很困惑.既然body
是100%(宽/高),main-container
也是100%(宽/高),那为什么还有垂直滚动?
我创建了一个 jsFiddle 来解释这种情况:http://jsfiddle.net/dcnnvgs1/1/
body,html {宽度:100%;高度:100%;font-family: "Trebuchet MS !important";背景色:#00b3b3;}.主容器{显示:弹性;弹性方向:列;flex-wrap: nowrap;高度:100%;宽度:100%;box-sizing: 边框框;}.main-header {背景色:#099;高度:10%;}.main-footer {背景色:#099;高度:10%;}.main-content {背景色:#fff;高度:100%;}
<div class="main-container"><div class="main-header">HEADER</div><div class="main-content">jecechejbhcbjbcjrbjb bbjbhbbk</div><div class="main-footer">FOOTER</div>
谢谢各位
解决方案
body
标签默认有一个边距取决于浏览器,例如在 chrome 中它的 margin:8px
你必须通过它来休息
body{保证金:0;}
查看更新的fiddle
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:8px
you have to rest it via
body{
margin:0;
}
see updated fiddle
这篇关于为什么主容器上有垂直滚动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文