Sticky

Structure your content to ensure footer at bottom

  Download   View project on Github

I read about this CSS technique for the first time reading this post from Ryan Fait.

After that, I have seen it has been used in many places and even included in major frameworks.

You only need to structure you page as follow

<html>
    <body>
        <div class="st-sticky-wrap">
            // You content here
            <div class="st-sticky-push"></div>
        </div>
        <div class="st-sticky-footer"></div>
    </body>
</html>

You can give to the sticky footer the height you need. This height can be expressed in px, ems or% as convenience. For doing that, you need to edit the Stasht.Sticky.css file and change the height in the right places.

A media-query is included for change the height in tablet and desktop devices.

The defaults included are 20em for mobile devices (<768px) and 10em for tablet and desktop (>=768).

No necessary any Javascript

less

For using just this component, create a .less file similar to Stashy.less, include in order the following imports and compile:

Stashy.Variables.less Stashy.Mixins.less Stashy.Sticky.less