Vertical/Height scrollbar appears when adding margin-top

Question

My HTML:

div.container

My CSS:

html, body {
  height: 100%;
  background-color: red;
  padding-left: 0px;
  padding-right: 0px;
}    
.container {
  height: 100%;
  background-color: blue;
  margin-top: 5px;
  *zoom: 1;
}

I want to use height=100% and DO NOT want to use overflow=hidden.

Which CSS properties I should use above so that I can have EFFECT OF margin-top for container div above which will not create vertical scroll-bar.

Just Imagine:

* Body with color red
* A div container in body and I want to see the margin of "x" px on top bewteen body and conatiner
* Color of div container blue
* No scrollbars and No overflow="hidden"

Please help

How can I accomplish this? Please help

Answer 1

Try this CSS

*{
    margin:0;
    padding:0;
}
html, body {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    height: 100%;
    background-color: red;
    padding-top:5px;
}    
.container {
    height: 100%;
    background-color: blue;
    *zoom: 1;
}

First reset all margin and padding.
box-sizing:border-box; means the size of an element will stay the same no matter how much padding you add to it.

You could also use an absolute positioned div for the red bar.

HTML

<div class="red-bar"></div>
<div class="content"></div>  

CSS

.red-bar{ position:absolute; width:100%; height:5px; top:0; background:red; }
.content{ height:100%; background:blue; }

Answer 2

Another solution is in use padding-top insted of margin-top