1

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Sachin
  • 2,627
  • 1
  • 19
  • 35

4 Answers4

3

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

Peter Wilson
  • 4,150
  • 3
  • 35
  • 62
2

You have to reset default body margin.

body,html{
width:100%;
height:100%;
font-family:"Trebuchet MS !important";
 background-color:#00b3b3;
  margin:0px; //reset default body margin
}

Every tag have it default css property which is depends upon browser.

Sunny Techo
  • 68
  • 7
2

Add this to your code:

body { margin: 0; }

All browsers have a default style sheet. It provides a basic set of styles.

Here is a sample default style sheet from the W3C: https://www.w3.org/TR/CSS22/sample.html

As you can see from the sample, body { margin: 8px; } is a recommended default setting.

When you add that margin space to your height: 100% it causes an overflow.

So add body { margin: 0; } to override the default.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
0

You do not have to set body width to 100%. It will automatically take the full width.

body,html{
 /*width:100%;*/
 height:100%;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-family:"Trebuchet MS !important";
 background-color:#00b3b3;
}
Domain
  • 11,562
  • 3
  • 23
  • 44