title: jQuery: sticking footer needs window resize to work sometimes
body: <p>I'm using a simple <a href="http://www.drupalcoder.com/blog/cross-browser-sticky-footer-with-fluid-height-using-jquery.html" rel="nofollow noreferrer"><strong>jQuery</strong> plugin</a> to sticking footer to the bottom of page, It works fine except when I put a table in the page:
  <img src="https://i.stack.imgur.com/FjvlE.jpg" alt="screenshot">
  But when I resize the page, it gets fixed and footer sticks to the bottom. What's wrongwith it? Is it a <strong>CSS</strong> related problem or <strong>jQuery</strong> problem?</p>
  
  <p>You can view the page without table <a href="http://jsfiddle.net/maysamsh/jA73A/" rel="nofollow noreferrer">here</a> and page with table <a href="http://jsfiddle.net/maysamsh/GSjtK/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>It's the <strong>jQuery</strong> script for sticking footer the bottom of page:</p>
  
  <pre><code>$(document).ready(function () {
      positionFooter();
  
      $(window)
          .scroll(positionFooter)
          .resize(positionFooter);
  
      function positionFooter() {
          var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
          if (docHeight &lt; $(window).height()) {
              var diff = $(window).height() - docHeight;
              if (!$("#sticky-footer-push").length &gt; 0) {
                  $("#footer").before('&lt;div id="sticky-footer-push"&gt;&lt;/div&gt;');
              }
              $("#sticky-footer-push").height(diff);
          }
      }
  });
  
  $(window).load(function () {
      $("#footer").stickyFooter();
  });
  
  // sticky footer plugin
  (function ($) {
      var footer;
  
      $.fn.extend({
          stickyFooter: function (options) {
              footer = this;
  
              positionFooter();
  
              $(window)
                  .scroll(positionFooter)
                  .resize(positionFooter);
  
              function positionFooter() {
                  var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
                  if (docHeight &lt; $(window).height()) {
                      var diff = $(window).height() - docHeight;
                      if (!$("#sticky-footer-push").length &gt; 0) {
                          $(footer).before('&lt;div id="sticky-footer-push"&gt;&lt;/div&gt;');
                      }
                      $("#sticky-footer-push").height(diff);
                  }
              }
          }
      });
  })(jQuery);
  </code></pre>