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>

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

Answer 1

尝试这个

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

Answer 2

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

但是，页脚似乎浮动在内容之上（如全屏背景图像），而不是应用于图像的底部。

Answer 3

虽然@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>

页脚在内容后应用，默认情况下不会固定到某个位置，因此如果您的内容未填满屏幕，则页脚将显示在屏幕中间的内容中。

示例：

http://jsfiddle.net/ZLMQk/

现在添加一些内容以将页脚向下推到页面：

http://jsfiddle.net/ZLMQk/1/

jQuery Mobile页脚漂浮在屏幕中间？

3 个答案: