title: Docking footers with Bootstrap
body: <p>Say I have the following "template" for what one of my pages should look like:</p>
  
  <p><img src="https://i.imgur.com/e273ZfU.png" alt="enter image description here"></p>
  
  <p>My pages consist of a header, a content section (different for each page), and a footer. Page height is the header height + content height + footer height. Notice the height of the footer; it's pretty tall/beefy. I'm OK with this.</p>
  
  <p>I don't want a 'sticky' footer, instead I'm looking for the following functionality:</p>
  
  <ul>
  <li>If the header height + content height is greater than viewport/window height, I don't want the footer to be visible until the user scrolls down to it (normal footer behavior); but...</li>
  <li>If header height + content height + footer height is <em>less than</em> viewport/window height, I want the footer pinned down to the bottom of the viewport. Meaning if the content for a particular page is very small or is even coompletely empty, I want my header pinned to the top of the window, and the footer pinned to the bottom.</li>
  </ul>
  
  <h3><a href="http://jsfiddle.net/2ngrk9sz/2/" rel="nofollow noreferrer">Example in jsFiddle</a></h3>
  
  <p>What do I need to do to change my <code>footer</code> div to exhibit the desired behavior?</p>
  
  <pre><code>&lt;!-- What needs to change here? --&gt;
  &lt;div class="footer "&gt;
      This should always be shown at the bottom if there isn't a lot of content to display below the header.
  &lt;/div&gt;
  </code></pre>