jquery-mobile - jQuery Mobile 页脚浮动在屏幕中间？

Question

每当我放入一个简单的页脚栏时，它不会停靠在屏幕底部，而是浮动在屏幕中间的中间位置。我的代码尽可能简单：

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

这会产生一个漂亮的标题和三个漂亮的按钮链接，然后是屏幕中间的页脚！为什么它会出现在那里而不是附加到视口的底部？

score 2 · Accepted Answer

2

试试这个

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

于 2012-05-24T02:41:14.937 回答

score 1 · Accepted Answer

从开始JQM 1.3，您可以使用data-position="fixed"infooter 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>

页脚在内容之后应用，并且默认情况下不固定到某个位置，因此如果您的内容没有填满屏幕，您的页脚将出现在屏幕中间的位置。

例子：