Making the footer stick at the bottom of the page

Question 1

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);

Question 2

#footer { 
    position: fixed;
    bottom: 0;
    left: 0;
}

Question 3

One thing I would add is a margin-bottom so that your footer doesn't hide any content when it reaches the bottom of the page.

.content {
  margin-bottom: 200px;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
}

Live Example