Footer Postion bottom of the screen in JQM?

Question

So i have this app and for some crazy reason my footer is not sitting at the bottom of the screen even though i'm using the data-postsion="fixed"

any ideas?

heres my code and a screen grab,

<div data-role="footer" data-position="fixed" data-theme="f" >        
                <div data-role="navbar">
                    <ul>
                        <li><a href="#page12" data-role="button" data-icon="arrow-l" data-iconpos="bottom" data-inline="true">Previous</a>                          </li>
                        <li><a href="#menu" data-role="button" data-icon="home" data-iconpos="bottom" data-inline="true">Home</a></li>
                        <li><a href="#page2" data-role="button" data-icon="arrow-r" data-iconpos="bottom" data-inline="true">Next</a></li>
                        </ul>
                </div>
            </div>

Answer 1

I think you are missing attribute "data-id" like data-id="sticky-footer" on all pages in combination with data-position="fixed".

To make a footer persistent between transitions, add the data-id attribute to the footer of all relevant pages and use the same id value for each. For example, by adding data-id="myfooter" to the current page and the target page, the framework will keep the footer anchors in the same spot during the page animation. This effect will only work correctly if the header and footer toolbars are set to data-position="fixed" so they are in view during the transition.

Checkout: Persistent Navbars on JQM.com

<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
    <ul>
        <li><a href="a.html">Info</a></li>
        <li><a href="b.html">Friends</a></li>
        <li><a href="c.html">Albums</a></li>
        <li><a href="d.html">Emails</a></li>
    </ul>
</div><!-- /navbar -->