Why was this wrong? About footer at bottom - css

Question

I dont get it. I wrote the code to have the footer always at the bottom. lets say sticky-footer. Here is my code.
body {
background-color: #edecd8;
margin:0;
padding:0;
height:100%;
}
#container {min-height:100%; position:relative;}
#body {
padding-bottom:20px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:20px;/* Height of the footer */
background: #FC0;}
</style>
<div id="footer"> contact | the athens store | Mitropoleos 37 </div>
With these code it didnt work well, actually the footer was not at the bottom but a bit higher. And then I added in the very beginning an html tag like this and it worked! Why was it wrong before?
html,body {
background-color: #edecd8;
margin:0;
padding:0;
height:100%;
}

Answer 1

browsers have a default page margin and padding, thats why you got a little space under you bar, and that is why developers use a css reset to ower write these.
Or by useing a simple code
if you replace this
html,body {
background-color: #edecd8;
margin:0;
padding:0;
height:100%;
}
to this
* {
margin:0;
padding:0;
}
body {
background-color: #edecd8;
height:100%;
}
it will work and owewrite all the default browser paddings and margins

Answer 2

Browsers have a standard (and often differing) css for elements. The html element may have had a margin or padding applied, keeping your footer off the bottom a little bit.
Or the html element needed to be given the 100% height to get it to expand the full height of the window.
This is why CSS resets are used, to get to a baseline standard between the browsers.