Want to build your own 24/7 FAQ knowledge base?
LibraryH3lp subscriptions include unlimited independent internal or public-facing knowledge bases.

Search the LibraryH3lp Knowledge Base


How do I make my FAQ's footer sticky?

1162 views   |   Last updated on Jun 11, 2020    faq


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;

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">
    {% block footer %}
      <footer class="footer">
        {% include "footer.html" %}
    {% endblock %}

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">



More Help

Search By Topic

Share this FAQ