Docking footers with Bootstrap

Profile picture for smeeb
smeeb

Say I have the following "template" for what one of my pages should look like:

enter image description here

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

What do I need to do to change my footer div to exhibit the desired behavior?

<!-- What needs to change here? -->
<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>

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:

<!-- language: lang-html --> 
<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>
<!-- language: lang-css --> 
* {
  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

Bootstrap Demo in Plunker

screenshot