jQuery移动页脚漂浮在屏幕中央？
jQuery移动页脚漂浮在屏幕中央？
提问于 2012-05-24 07:35:45
任何时候我放入一个简单的页脚栏，而不是停靠在屏幕的底部，它会漂浮在屏幕的中间。我的代码尽可能简单：
<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>这会产生一个漂亮的页眉和三个漂亮的按钮链接，紧随其后的是屏幕中间的一个页脚！为什么它会出现在那里，而不是附加到视口的底部？
回答 3
Stack Overflow用户
发布于 2012-05-24 10:41:15
试试这个
<div data-role="footer" data-position="fixed">
<h1>Hey guys!</h1>
</div>Stack Overflow用户
发布于 2013-05-31 18:26:16
从JQM 1.3开始，您可以使用footer div中的data-position="fixed"来实现以下目标：
<div data-role="footer" class="ui-bar" data-position="fixed">
<h4>I am a fixed footer!!</h4>
</div>然而，页脚似乎漂浮在内容的顶部(如全屏背景图像)，而不是应用于图像的底部。
Stack Overflow用户
发布于 2012-05-25 00:14:33
虽然@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>页脚是在内容之后应用的，默认情况下并不固定在某个位置，因此，如果您的内容没有填满屏幕，您的页脚将出现在看起来像屏幕中间的位置。
示例：
现在添加一些内容来将页脚向下推：
更多内容：
使用固定位置：
或持久选项：
也是一个可能对您有效的选项。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10729329
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号