jquery - How to keep footer at the bottom even with dynamic height website

Question

How do I keep a footer div always at the bottom of the window when I have a page that dynamically set the height (get info from database, for example) with CSS?

---

If you want to do with jQuery, i came up with this and works fine:

Set the CSS of your footer:

#footer { position:absolute; width:100%; height:100px; }

Set the script:

<script>
  x = $('#div-that-increase-height').height()+20; // +20 gives space between div and footer
  y = $(window).height();    
  if (x+100<=y){ // 100 is the height of your footer
    $('#footer').css('top', y-100+'px');// again 100 is the height of your footer
    $('#footer').css('display', 'block');
  }else{
    $('#footer').css('top', x+'px');
    $('#footer').css('display', 'block');
  }
</script>

This script must be at the end of your code;

Answer 1

I think this will solve all your problems:

    <script>

  $(document).ready(function() {

   var docHeight = $(window).height();
   var footerHeight = $('#footer').height();
   var footerTop = $('#footer').position().top + footerHeight;

   if (footerTop < docHeight) {
    $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
   }
  });
 </script>

You need at least an element with a #footer

When not want the scrollbar if content would fit to screen just change the value of 10 to 0 The scrollbar will show up if content not fits to screen.