title: place footer at bottom only if page is "short"
body: <p>i have  a website with several pages. each page has different height (obvious, but i mention it). </p>
  
  <p>what i would like to achieve is that if the content of the page is lower then the browser viewport, the footer tag will get a fixed position and will be aligned to the bottom of the page. </p>
  
  <p>iv'e tried this js:</p>
  
  <pre><code>$(function(){
  if ($(document).height() &gt; $("footer").offset().top+44) {
          $("footer").addClass('fixbottom');
      }
  }
  });
  
  $(window).resize(function() {
      if ($(document).height() &gt; $("footer").offset().top+44) {
          $("footer").addClass('fixbottom');
      }
  });
  </code></pre>
  
  <p>and that css:</p>
  
  <pre><code>.fixbottom {
      width: 100%;
      position: fixed;
      bottom: 0;
  }
  
  
  footer {
  height:44px;
      background: #7abde9;
      color: #ffffff;
      text-align: center;
  }
  </code></pre>
  
  <p>the top+44 in my jquery is because my footer tag is 44 height
  iv'e used the document ready and window resize to make sure all situations should meet, but unfortunately that's does not seem to work in any case. </p>
  
  <p>any help should be greatly appriciated </p>