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

Header
Content
Footer

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.