Question

我正在使用phonegap和jquery mobile。我的代码在下面给出

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=screen.width; initial-scale=1" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" type="text/css">
  <script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
  <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
  <script type="text/javascript" src="jquery.mobile/phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
 <!-- CDN Respositories: For production, replace lines above with these        uncommented       minified versions -->
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />-->
<!-- <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>-->
<!-- <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>-->
</head>
<body>
<div id="page" data-role="page" data-theme="b">
<div class="ui-btn-corner-top" data-role="header" data-theme="b" >
<h1>Login</h1>
</div>
<div data-role="content">
<div>
<h4>
  <label for="userName" style="text-align:center">User Name</label>
</h4>
<input name="userName" type="text" id="userName" value="" data-theme="b"  />
</div>
<div>
<h4>
  <label for="passwordinput" style="text-align:center">Password</label>
</h4>
<input name="passwordinput" type="password" id="passwordinput" value="" data-theme="b"  />
</div>
</div>
<div class="ui-btn-corner-bottom" data-role="footer" data-theme="b">
<h4>Auth Demo</h4>
</div>
</div>
</body>
</html>

但是元素并没有填充整个屏幕......它在屏幕中间结束。如果获得整个屏幕的高度和宽度，我该怎么办？

Answer 1

可能你可以尝试这样做：

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
</style>

<body> 
<div id="page" data-role="page" data-theme="b" style="width:100%; height:100%">
...
</div>
</body>

Answer 2

将data-position =“fixed”属性添加到页脚div。

此处有更多详情：http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html

如何使用phonegap在Android中将元素填充到整个屏幕的宽度和高度

2 个答案: