Pracuję na mobilnej aplikacji internetowej przy użyciu jquery mobile i phonegap. Opracowałem aplikację hello world. Ma obszar nagłówka, stopki i zawartości. Nagłówek i stopka są ustalane za pomocądata-position="fixed" atrybut. Ale problem z nagłówkiem i stopką polega na tym, że kiedy przewijam w dół i gdy zawartość jest zakończona i nie ma już potrzeby przewijania, to jej nagłówek przeciąga się w dół (dla elastyczności lub wskazania i nie ma więcej zawartości). Podobnie jak w innych aplikacjach ios, ta funkcja istnieje, ale w tych aplikacjach nagłówek i stopka nie przeciągają się w górę iw dół tylko w obszarze zawartości. Proszę zobaczyć zdjęcie, co mam na myśli

Jak na powyższym zdjęciu, nagłówek jest przeciągany w stronę dolnej strony, której nie chcę. Chcę, aby ta funkcja miała tylko obszar zawartości. Jak mogę zrobić to w ten sposób, aby obszar zawartości przeciągał się tylko wtedy, gdy nie ma więcej dostępnych treści do obejrzenia?

Dowolny trik mobilny css, jquery lub jquery?

Aktualizacja

Kod HTML tutaj

<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 -->