how to keep jquery mobile header and footer fixed?

Question

I am making a website using jQuery Mobile.

How to keep jquery mobile header and footer fixed? I just want only the content to scroll(just like it happens in iPhone applications), and keep the headers and footers fixed at top and bottom.

Any suggestions ?

Answer 1

Add this attribute to your header/footer div:

        <div data-role="header" data-position="fixed">
            <h1>Header Page 1</h1>
        </div>

Also, you might have a look at this: http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html