jQuery Forum

not tested, just from top of my mind.

i would just add the following so you can check the heights and act accordingly. leave the data-position so if content height > page height the footer stays there

1. if ($('yourcontent').height () < $'(yourpage').height ()) {
2.       // use .css () to positionthe footer at the bottom
3.       // probably position: absolute; bottom: 0 and remove data-position="fixed" attribute
4. }
   

Here is my solution:

<style>
  .footer-wrapper
        {
            position: absolute;
            bottom: 0px;
            width: 100%;
        }
</style>
 <div class='footer-wrapper'>
            <div data-role='footer'>
                <h6>
                  Your Footer Caption
                </h6>
            </div>
    </div>

Hope it will help you.