Estoy trabajando en la aplicación web móvil utilizando jquery mobile y phonegap. He desarrollado una aplicación hola mundo. Cuenta con cabecera, pie de página y área de contenidos. Encabezado y pie de página se fijan utilizandodata-position="fixed" atributo. Pero el problema con el encabezado y el pie de página es que cuando me desplazo hacia abajo y cuando el contenido está terminado y ya no hay necesidad de desplazarlo, su encabezado se reduce (para mayor flexibilidad o indicación y no hay más contenido). Al igual que en otras aplicaciones de iOS, esta función existe, pero en esas aplicaciones el encabezado y el pie de página no arrastran hacia arriba y hacia abajo el área de contenido solo arrastra. Por favor, vea la imagen lo que quiero decir.

Como en la imagen anterior, el encabezado se arrastra hacia el lado inferior, lo que no quiero. Quiero que solo el área de contenido tenga esta característica. ¿Cómo puedo hacerlo de manera que el área de contenido se arrastre solo cuando no haya más contenidos disponibles para ver?

¿Alguna ayuda css, jquery o jquery truco móvil?

Actualizar

Código HTML aquí

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