Sachin Sachin - 7 months ago 9
HTML Question

Why is the body element overflowing and causing vertical scroll?

I am very much confused here. Since the body is 100% (width/height) and main container is also 100% (width/height).

I created a jsFiddle to explain the situation.

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


Thanks guys

Answer

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