Footer below content, but not floating mid-air if not enough content

Question

I got this code:

DEMO: http://jsfiddle.net/z21nz89d/2/

HTML:

Answer 1

If you really want to do it the javascript way, you can achieve it with this code:

http://jsfiddle.net/z21nz89d/6/

$(function() {
    var windowHeight = $(window).height();
    var contHeight = $(".main-container").height();
    var footHeight = $("footer").height();
    var testHeight = windowHeight - footHeight;

    if (contHeight < testHeight) {
        $("footer").css("bottom", "0");
        $("footer").css("left", "0");
     }
}); 

Make sure to add the following css rules, the HTML, BODY stuff is very important.

html, body {
   height: 100%;
   width: 100%;
   min-height: 100%;
   padding: 0;
   margin: 0;
}

You will also have to wrap ALL your context EXCEPT for the footer in a div with a class of, let's say, "main-container", that way you can test the height of the entire body vs the height of the content minus the footer, understand?

It's all the JSFiddle.

Just note this really isn't the semantic way of doing this. A pure css sticky footer would be better in my opinion. If you can't use one, this will work.