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

Then you have to use javascript for that - calculate the height of the content - substract it from the window height and set the margin-top of the footer from that distance:

• jsfiddle
• jsfiddle show

HTML

<div id="header" class="header">Header</div>
<div id="content" class="content">Content</div>
<div id="footer" class="footer">Footer</div>

JS (This example uses jQuery, it should be included before this script.)

$('#footer').css('margin-top',
  $(document).height() 
  - ( $('#header').height() + $('#content').height() ) 
  - $('#footer').height()
);

You can put an onresize window that call this function on any resize of the window.

[edit blag :]

Here is the onResize method (but with a min-height and not a margin-top)

Check the JSFiddle

 // function to set the height on fly
 function autoHeight() {
   $('#content').css('min-height', 0);
   $('#content').css('min-height', (
     $(document).height() 
     - $('#header').height() 
     - $('#footer').height()
   ));
 }

 // onDocumentReady function bind
 $(document).ready(function() {
   autoHeight();
 });

 // onResize bind of the function
 $(window).resize(function() {
   autoHeight();
 });

---

Borders, padding and margin

If you want to have borders and padding included in the calculation you can use outerHeight() instead of height(). Alternatively outerHeight(true) also includes margins.

Answer 2

The following solution works for me, based on the answer from Александр Михайлов. It finds the bottom of the footer and determines if it is less than the document height and uses top margin on the footer to make up the shortfall. This solution might give issues if your content is being resized on the go.

$(function () {
    updateFooterPosition();
});

$(window).resize(function () {
    updateFooterPosition();
});

function updateFooterPosition() {
    var bottomOfFooter = $('footer').offset().top + $('footer').outerHeight(true);
    var heightShortage = $(document).height() - bottomOfFooter;
    if (heightShortage < 0) heightShortage = 0;
    $('footer').css('margin-top', heightShortage);
}

Answer 3

A CSS Sticky footer should solve your problem.

Here's an example

That is super easy to setup and use. It will force the footer down the page with the content, and if the content isn't big enough to fill the page it will stick to the bottom.

Answer 4

    function autoHeight() {
        var h = $(document).height() - $('body').height();
        if (h > 0) {
            $('#footer').css({
                marginTop: h
            });
        }
    }
    $(window).on('load', autoHeight);

Answer 5

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