fixed header scrolls/drags in jquery mobile

Question

I am working on mobile web app using jquery mobile and phonegap. I developed a hello world app. It has header, footer and contents area. Header and footer are fixed using data-position="fixed" attribute. But the problem with header and footer is, when I scroll down and when the contents a finished and there is not need to scroll anymore then its header drags down(for flexibility or indication and there are not more contents). As in other ios apps, this feature exists but in those apps the header and footer does not drags up and down the contents area only drags. Please see the picture what I mean

As in above picture the header is dragged towards bottom side which I do not want. I want only the content area to have this feature. How can I make it this way so that contents area drags only when there are no more contents available to see?

Any help css, jquery or jquery mobile trick?

Update

HTML code here

<div data-role="page">

        <div data-role="header" id="header" data-position="fixed">
            <h1>Page Title</h1>
        </div><!-- /header -->

        <div data-role="content" id="contents">
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
    </div><!-- /page -->

Answer 1

I struggled with this for ages and this really worked for me, include where you initialise the application:

$("body").fixedtoolbar({ tapToggle: false });

See the full discussion here: https://forum.jquery.com/topic/is-this-really-so-difficult-full-screen-non-scrolling-page-with-header-and-footer