How do I make my FAQ's footer sticky?!

If you want to be extra fancy, you can opt to make your footer sticky. A sticky footer always remains at the bottom of a page and comes in handy for your individual question pages where content may be short, making your footer appear higher on the page.

Bootstrap provides a nice example of how to do a sticky footer. Let's walk through it within the context of your LibraryH3lp-powered FAQ!

1) Add sticky footer styling

Within the head element of the base.html template, add the following code, adjusting the 75px height to match your actual footer height if needed:

<style type="text/css">
  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;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -75px;
  }

  /* Set the fixed height of the footer here */
  #push, #footer {
    height: 75px;
  }
</style>

2) Add a wrapper id to your container div

Within the body of base.html, look for a div with a container class. Add a wrap id. E.g.

  <div id="wrap" class="container">

3) Add a push div

Just before the end of the container div, add a push div. E.g.

  <div id="wrap" class="container">
    ...
    <div id="push"></div>
  </div><!-- /container -->

3) Modify your existing footer

Move your footer outside the container div and within a footer div. E.g.

  <div id="wrap" class="container">
    ...
    <div id="push"></div>
  </div><!-- /container -->
  
  <div id="footer" class="container">
    <hr/>
    {% block footer %}
      <footer class="footer">
        {% include "footer.html" %}
      </footer>
    {% endblock %}
  </div>
  

Note: If you want your footer to span the full width of the page, remove the container class from the footer div above. E.g.

  <div id="footer">

FAQ URL: