Sticky Footer created by Martin Bean and Ryan Fait. It's a really clean and elegant solution. I learned a lot from it.">

Bootstrap 3 Sticky Footer by Martin Bean and Ryan Fait

2015 Jul 09 | Source

You can view introduction page here.

Generally A sticky footer is created just like the fixed-nav bar in Bootstrap3. This footer will always stay at the bottom of page, even though there isn't enough content.

Martin Bean and Ryan Fait also have a Sticky Footer with Fixed Nav Bar page here.

Following is part of basic code for Sticky Nav bar with my analysis (You need Bootstrap3 css library):

In HTML, You have two big divs: #wrap and #footer. #footer contains everything you want to put in footer.

#wrap has two small divs: .container and #push. You put all main content in .container and nothing in push

  <body>
    <!-- Part 1: Wrap all page content here -->
    <div id="wrap">
      <!-- Begin page content -->
      <div class="container">
        <!-- Content -->
      </div>
      <div id="push"></div>
    </div>
    <!-- Park 2: Footer -->
    <div id="footer">
      <!-- Footer -->
    </div>
   </body>

#wrap takes full height of page. You set this by using min-height. Set height to auto to make sure small amount of content will not shrink #wrap. #wrap has a bottom margin -60px. This number can be changed, but it must be the same height as #push and #footer. This negative margin can allow #footer always stick to bottom of #wrap.

#push is used as a placeholder for #footer. #footer has same height as #push, so it covers #push because of the negative margin in #wrap. Items above #push will stay in distance from #footer, because since they have bottom margin to #push, they now have bottom margin to #footer.

  /* Sticky footer styles
  -------------------------------------------------- */
  html,
  body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
  }
  /* Wrapper for page content to push down footer */
  #wrap {
    min-height: 100%;
    height: auto !important;
    /* Negative indent footer by it's height */
    margin: 0 auto -60px;
    /**In th
  }
  /* Set the fixed height of the footer here */
  #push,
  #footer {
    height: 60px;
  }