Footer always at very bottom (move with content, but min at bottom)

I'm trying to set up a website with header, body and footer. I want the footer to be at the very bottom of the page but move it relative to the content. Here is what I got so far

html:

<html>
   <header>
   </header>
   <body>
      <div id="header">
      </div>
      <div id="body">
      </div>
      <div id="footer">
      </div>
   </body>
</html>

css:

* { 
    padding: 0; 
    margin: 0; 
}
html {
    overflow-y: scroll;
}
html, body { 
    height: 100%; 
    width: 100%; 
}
#header {
    height: 60px;
    position: fixed;
    top: 10px;
    left: 0; 
    right: 0; 
}
#body {
    min-height:74.3%;
    width:100%;

    padding-top   : 10%; 
    padding-bottom: 40px;
}

#footer {      
    height: 40px;
    position: relative;
    z-index: 1;
}

On my resolution (Retina) everything is working fine, but when testing on lower resolutions the footer appears above the page bottom if the content of <div id="body"></div> is not enough to fill the whole page.

Any suggestions how to fix this?

Thanks in advance!

Solution

Try http://ryanfait.com/sticky-footer/

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

Another Example : https://css-tricks.com/snippets/css/sticky-footer/