Create Sticky Footer For Short Page - StickyFooter.js

A super tiny (<1kb minified) jQuery sticky footer plugin that makes the footer element always stay at the bottom of the webpage even if the page is too short.

Without the need of CSS position: fixed, position: absolute, or position: sticky property.

The plugin detects if the height of your content is shorter than the screen height and then extends the main content to fill the difference.

Licensed under the GNU General Public License v3.0.

How to use it:

1. Create a footer element for your webpage.

<header class="header">
  <h1>Header</h1>
</header>

<nav class="nav">
  <h2>Nav</h2>
  <ul>
    <li>Item one</li>
    <li>Item two</li>
  </ul>
</nav>

<main class="main-content">
  <h3>Hello</h3>
  <p>Main Content</p>
</main>

<footer class="footer">
  <p>Footer</p>
</footer>

2. Insert the JavaScript file sticky-footer.min.js into the document.

<script src="/path/to/cdn/jquery.slim.min.js></script>
<script src="/path/to/src/sticky-footer.js"></script>

3. Call the function StickyFooter on the main content and the plugin will take care of the rest.

;(function(jQuery, StickyFooter) {

  "use strict";

  var init = function() {
      new StickyFooter(".main-content");
  };

  jQuery(window).on("load", init);

})(jQuery, StickyFooter);

Changelog:

2020-04-23

• v2.0.0

2020-02-04

• JS Update

---

This awesome jQuery plugin is developed by jahidulpabelislam. For more Advanced Usages, please check the demo page or visit the official website.