jQuery plugin to make the page footer stick to the bottom of the page.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
INSTALLATION_INSTRUCTIONS
LICENSE
README
RELEASE_NOTES
VERSION
example.html
example_page_styling_only.css
ez-sticky-footer.jquery.json
jquery.ez-sticky-footer.js

README

                        EZ-Sticky-Footer jQuery plugin

                        Version: 0.1.3-development_unreleased
                        (Latest release in branch 'master--release--0.1.3')

     jQuery plugin that provides an easy way to create a "sticky" page footer.
     What is a sticky footer? -- It is a footer that remains attached (or
     "stuck") to the bottom of the browser viewport even when the browser
     viewport height exceeds the implicit height of the page content.

     Project URLs:  http://maratbn.com/projects/ez-sticky-footer
                    https://github.com/maratbn/EZ-Sticky-Footer
                    https://plugins.jquery.com/ez-sticky-footer

     Demo URL:      http://www.maratbn.com/misc/ez-sticky-footer-demo/example.html


 Copyright (c) 2013-2015 Marat Nepomnyashy   http://maratbn.com  maratbn@gmail

                             Licensed under BSD-3


    JavaScript-based solution for a non-trival CSS problem.

        * No numeric configuration with dynamically-changing and arbitrary
          footer / content areas heights.

        * No absolute or relative positioning.

        * No other funky CSS tricks and hacks, in fact no CSS required.

        * Works on IE6+.

        * Works on the default Android Browser.


    The plugin requires that 3 special <div>s (or any other tags that are
    displayed in block mode) be designated as:

        (1) Main page container <div>
        (2) The content expander <div>
        (3) The page footer <div>

    The <div>s are designated by assigning them special CSS class names
    according to the following table:

    role                            CSS class name to assign
    ----                            ------------------------
    page container                  jq-ez-sticky-footer-page-container
    content expander                jq-ez-sticky-footer-content-expander
    page footer                     jq-ez-sticky-footer-page-footer

    The structure of the page must be the following:

    <body>
      <div class='jq-ez-sticky-footer-page-container'>
        <div>your header (does not need any CSS class)</div>
        <div>
          ...
          your content (does not need any CSS class)
          ...
          <div class='jq-ez-sticky-footer-content-expander'></div>
        </div>
        <div class='jq-ez-sticky-footer-page-footer'>
          your footer
        </div>
      </div>
    </body>

    Important:

        (1) The container <div> designated for use by the plugin should
            not have any customized margin or padding styles applied to
            it, as the plugin needs to manipulate these settings for it to
            work.  If needed by the page, these settings can still be
            specified in a nested <div>.
        (2) The expander <div> must be inside the page content <div>.
        (3) The expander <div> must be completely empty.


    Please see INSTALLATION_INSTRUCTIONS for more details.

    If the plugin does not seem to work correctly, please file a bug report
    at:

        https://github.com/maratbn/EZ-Sticky-Footer/issues

    When filing a bug report, please make sure to state the browser you're
    using, and to include links to 'example.html' on your webserver, as
    well as the page on which the plugin is deployed but does not seem to
    be working.