css formating issue with html at top - html

Question

So I'm trying to design a webpage and was trying to get the footer to stick to the bottom of the page at all times. I did manage to do that with trouble but I figured out where my error was. What I want to know is what is the difference between doing this,
body {
background: red;
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background: black;
padding:10px;
}
#content {
background: green;
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
and doing this,
html,
body {
background: red;
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background: black;
padding:10px;
}
#content {
background: green;
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
Why does putting the html part at the top make the footer part of the code work? It doesn't seem to effect any of the other code, just the part that makes the footer stay at the bottom. This isn't my code just the code I got from here I have the same issue in my code though and was just wondering what the deal was cause I can't find anything on this.
http://www.cssreset.com/2010/css-tutorials/how-to-keep-footer-at-bottom-of-page-with-css/
Sorry if I wrote this wrong first time posting.

Answer 1

Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have it's height set as well.

Answer 2

the absolute position must be relative to another element and in your case the footer is relative to the body. By default the height of body and html isn't 100% to the screen, so if you make your footer absolute to the bottom of body it will be at the bottom of body not the screen so to solve this you made the body height is 100% of the html which must be also 100% to the screen.
you can also use the fixed position instead of absolute, position:fixed will be relative to the screen not to any other element so you footer will be in the bottom even the body and html height isn't 100%