Making the footer stick at the bottom of the page

What I really want is to make the footer at the bottom of the page stick while rest of the page scrolls. None of the answers here I find satisfactory. So please if someone can help.

EDIT

Actually I am dynamically modifying the DOM elements of body using javascript. So I dont have a div named "content". i.e. the structure of my html file would be like this :

<body> 

---- body ----- 

<div id="footer">
  My Dynamic Footer
</div> 
</body>

Solution

position: fixed; is the only solution in your case see this demo

CSS

    html, body, #container {
    height: 100%;
    margin:0;
    padding:0;
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    height: 3em;
    width:100%;
    background-color:grey;
}

HTML

My Dynamic Footer

Note : In the fiddle, un-comment the text to see the footer stretching the height after a dynmic height content!!

==========================EDIT==========================

as per your comment, here is the updated fiddle

==========================jQuery EDIT==========================

Using jQuery you can achieve the target...see fiddle

JQ required :

$( "<div class='space'></div>" ).insertBefore( "#footer" );

CSS

html, body {
    height: 100%;
    margin:0;
    padding:0;
}
.space
{
    height:6em; /* this is problem solver */
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    height: 3em;
    width:100%;
    background-color:grey;
}

==========================Final EDIT using JAVASCRIPT==========================

javascript demo

Keeping above HTMl markup same, use below javascript to solve your problem :

var link = document.getElementById("footer")
var new_node = document.createElement("div");
new_node.className="space";
new_node.innerHTML = "";
link.parentNode.insertBefore(new_node, link.nextSibling);