jQuery Mobile，在不使用 data-position="fixed" 的情况下将页脚设置为屏幕底部，这可能吗？
Posted
技术标签:
【中文标题】jQuery Mobile，在不使用 data-position="fixed" 的情况下将页脚设置为屏幕底部，这可能吗？【英文标题】：jQuery Mobile, set footer to bottom of screen without using data-position="fixed", is it possible? 【发布时间】：2012-07-31 09:36:05 【问题描述】：我想将页脚设置为附加在屏幕底部，这可以通过设置<div data-role="footer" data-id="persistent_navbar" data-position="fixed"> 轻松完成，详见 jquery documentation
但是，这似乎会产生以下不想要的输出：
因此，通过删除data-position="fixed"，页脚会整齐地适应目标内容的宽度，但它会浮在主要内容的下方，如下所示：
问题：如何将页脚附加到屏幕底部，同时确保页脚不会从其容器中溢出？最终目标是在页眉和页脚之间有一个滚动列表。
这是我上面的 html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<title>SmartConf</title>
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/SmartConf.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
</head>
<body onload="WL.Client.init()" id="content" style="display: none">
<div data-role="page">
<div data-role="header">
<h1>Welcome</h1>
</div><!-- /header -->
<div data-role="content">
<a href="home.html" data-role="button">Enter</a>
</div><!-- /content -->
<div data-role="footer" data-id="persistent_navbar">
<h4>Some footer here</h4>
</div>
</div><!-- /page -->
<script src="js/SmartConf.js"></script>
<script src="js/messages.js"></script>
<script src="js/auth.js"></script>
<script src="js/jquery/jquery.mobile-1.1.1.js"></script>
</body>
</html>
SmartConf.css：
/*Worklight container div */
#content
height: 460px;
margin: 0 auto;
width: 320px;
谢谢
【问题讨论】：
***.com/questions/11725351/… 【参考方案1】：我用这个
<ul data-dojo-type="dojox.mobile.TabBar" class="tab_bar"
data-dojo-props='fixed: "bottom"' syncWithViews="true">
【讨论】：
【参考方案2】：您是否尝试更改此设置：
#content
height: 460px;
margin: 0 auto;
width: 320px;
进入这个：
#content
height: auto;
margin: 0 auto;
width: auto;
或者换句话说，你为什么要限制你的宽度和高度？
【讨论】：
以上是关于jQuery Mobile，在不使用 data-position="fixed" 的情况下将页脚设置为屏幕底部，这可能吗？的主要内容，如果未能解决你的问题，请参考以下文章
Jquery mobile 阻止从我的基于 django 的站点下载