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 pages are loaded into the content div using ajax.

Some of the pages have lots of content and they fill out the page so scroll is needed. Some of the pages have only one or two lines of content so they leave a big empty part (Not necessarily different pages - one page for example shows a list of orders, you can have no orders and you can have hundreds...).

This is what i want to achieve: If the page is not full with content, the footer will be in the bottom of the page. If the page is full and scroll is needed, the footer will be immediately after the content (so you scroll down the page and in the end you reach the footer).

The sticky footer solutions are not good for me because i don't want the footer to stick to the bottom always, only when the page is not full of content.

Is there anyway to achieve that? Thanks.

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

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 3

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

Answer 4

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

Answer 6

Here's the solution i came to on my project

function autoHeight() {

    if ( document.body.clientHeight < window.innerHeight ) {
        document.querySelector('#footer').style.position = 'absolute';
        document.querySelector('#footer').style.bottom = '0';
    }
}

document.addEventListener("DOMContentLoaded", function() {
  autoHeight();
});