I think a sticky footer is *exactly* what you want (just not a `fixed` footer)

Taken directly from the wiki for [tag:sticky-footer]:

> Sticky Footer is a CSS technique used to anchor the footer section to the bottom of the page, regardless of the page's height. When the page height is less than the viewport, the Sticky Footer will be at the bottom of the viewport, and when the page height is longer than the viewport, the Sticky Footer will be at the bottom of the page.


Here's the canonical Sticky Footer Implementation:  
http://ryanfait.com/html5-sticky-footer/

Here's a bare bones example:



    <html>
        <head>
            <link rel="stylesheet" href="layout.css" ... />
        </head>
        <body>
            <div class="wrapper">
                <p>Your website content here.</p>
                <div class="push"></div>
            </div>
            <div class="footer">
                <p>Copyright (c) 2008</p>
            </div>
        </body>
    </html>




    * {
      margin: 0;
    }
    html, body {
      height: 100%;
    }
    .wrapper {
      min-height: 100%;
      height: auto !important;
      height: 100%;
      margin: 0 auto -4em;
    }
    .footer, .push {
      height: 4em;
    }

    .footer {
      background: yellow;
    }

If you want to use bootstrap, just add the bootstrap CSS and whatever other classes you want

### [Simple Demo in Plunker][plunker simple]

### [Bootstrap Demo in Plunker][plunker bootstrap]

[![screenshot][gif]][album]

[plunker simple]: http://plnkr.co/edit/Z0SAUVx8xPvkvpmAkRRI?p=preview
[plunker bootstrap]: http://plnkr.co/edit/IgR7GCNvgtm7Km4Tx9B6?p=preview
[album]: http://imgur.com/a/osMnb
[gif]: http://i.imgur.com/eGbYqm5.gif

Say I have the following "template" for what one of my pages should look like:

![enter image description here](http://i.imgur.com/e273ZfU.png)

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.

I don't want a 'sticky' footer, instead I'm looking for the following functionality:

 * 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...
 * If header height + content height + footer height is *less than* 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.
 
### [Example in jsFiddle](http://jsfiddle.net/2ngrk9sz/2/)

What do I need to do to change my `footer` div to exhibit the desired behavior?

    
    <div class="footer ">
        This should always be shown at the bottom if there isn't a lot of content to display below the header.
    </div>