Marat BN — Marat Borisovich Nepomnyashy's home page

Overview:

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.

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.

Demo:

Click here for the demo page.

Technical summary:

• Works by dynamically altering the static height of an explictly-designated expander <div> as the viewport height is varied by the user, to make another explicitly-designated footer <div> always end-up statically-positioned at the very bottom of the page, even if the page content above the expander <div> does not reach that far down.

• The expander <div> height becomes 0 when the page content meets of exceeds the height of the viewport, making the footer immediately follow the content in such case.

• The page container, the expander, and the footer <div>s must be explicitly designated in the page markup, see README and INSTALLATION_INSTRUCTIONS for details.

Troubleshooting / bug reporting:

Please post issues / bugs to https://github.com/maratbn/EZ-Sticky-Footer/issues.