jquery-mobile - jQuery Mobile footer floating in middle of screen?

Question

Anytime I put in a simple footer bar, instead of docking at the bottom of the screen, it floats in the middle, halfway up the screen. My code is as simple as is permitted:

    <body id="mainBody" onload="initialize()">      

      <div id="mainPage" data-role="page" data-theme="e">
        <div data-role="header">
             <!-- <img src="headerlogo.png" />-->
              <br />
              <p style="text-align:center">To begin searching for samples, select one of the search methods from the following table.</p>
        </div>

      <div data-role="content">
          <a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a>
          <a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a>
          <a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a>
      </div>

      <div data-role="footer">
          <h1>Hey guys!</h1>
      </div>

    </div>


  </body>

This results in a nice header and three nice button links, followed immediately by a footer in the middle of the screen! Why would it appear there instead of attaching to the bottom of the viewport?

score 2 · Accepted Answer

これを試してください

 <div data-role="footer" data-position="fixed">
      <h1>Hey guys!</h1>
  </div>

score 1 · Accepted Answer

の時点でJQM 1.3、でを使用しdata-position="fixed"てfooter divこれを実現できます。

<div data-role="footer" class="ui-bar" data-position="fixed">
            <h4>I am a fixed footer!!</h4>
</div>

ただし、フッターは、画像の下部に適用されるのではなく、コンテンツの上に浮かんでいるようです (フルスクリーンの背景画像のように)。

score 0 · Accepted Answer

@stay_hungryにも解決策がありますが、問題はコンテンツです

<div data-role="content">
    <a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a>
    <a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a>
    <a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a>
</div>

フッターはコンテンツの後に適用され、デフォルトでは位置が固定されていないため、コンテンツが画面いっぱいに表示されない場合、フッターは画面の中央に表示されます。

例：