jquery mobile と phonegap を使用してモバイル Web アプリに取り組んでいます。私はハローワールドアプリを開発しました。ヘッダー、フッター、コンテンツ領域があります。ヘッダーとフッターは、data-position="fixed"属性を使用して固定されています。しかし、ヘッダーとフッターの問題は、下にスクロールしてコンテンツが終了し、スクロールする必要がなくなったときに、ヘッダーが下にドラッグされることです(柔軟性または表示のために、それ以上のコンテンツはありません)。他の iOS アプリと同様に、この機能は存在しますが、これらのアプリでは、ヘッダーとフッターは上下にドラッグされず、コンテンツ エリアのみがドラッグされます。私が言いたいことは写真を見てください
上の図のように、ヘッダーが下側にドラッグされますが、これは望ましくありません。コンテンツ領域のみにこの機能を持たせたい。表示できるコンテンツがなくなった場合にのみコンテンツ領域がドラッグされるようにするにはどうすればよいですか?
css、jquery、jquery モバイル トリックのヘルプはありますか?
アップデート
HTMLコードはこちら
<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 -->