Push footer to bottom when page is not full

Question

I\'m developing a mobile web app. This is the main structure from top to bottom: header div, menu div, content div, footer div. The header, menu and footer are constant and page

Answer 1

This solution worked for me. I think this is perfect if you have more than only a #header and #footer. It just push the content down with a padding-bottom if body is smaller than the viewport.

function autoHeight() {
    var bodyHeight = $("body").height();
    var vwptHeight = $(window).height();
    var gap = vwptHeight - bodyHeight;
    if (vwptHeight > bodyHeight) {
        $("#content").css( "padding-bottom" , gap );
    } else {
        $("#content").css( "padding-bottom" , "0" );
    }
}
$(document).ready(function() {
    autoHeight();
});
$(window).resize(function() {
    autoHeight();   
});