我在控制台上使用 Chrome 的仿真,当我尝试在所有设备上测试我的代码时,我在三星 Galaxy S、SII、W 模拟器中得到了这种古怪的行为。我不明白为什么!
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Identification</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.css">
<link rel="stylesheet" href="../CasaElectionsMobileApp/public/dataTables/media/css/jquery.dataTables.css">
<link href="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile.structure-1.4.4.min.css" rel="stylesheet" />
<script src="../CasaElectionsMobileApp/public/jquery-2.1.1.min.js"></script>
<script src="../CasaElectionsMobileApp/public/jquery-1.11.2.js"></script>
<script src="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.js"></script>
<script src="../CasaElectionsMobileApp/public/dataTables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#datatable1').DataTable();
} );
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b" data-position="fixed">
<h1>Elections</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
</div>
<table id="datatable1" class="display" cellspacing="0">
<thead>
<tr>
<th>Status</th>
<th>Nom</th>
<th>Prénom</th>
<th>CIN</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Status</th>
<th>Nom</th>
<th>Prénom</th>
<th>CIN</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Y</td>
<td>AZERTY</td>
<td>QWERTY</td>
<td>KKKKKK</td>
</tr>
<tr>
<td>Y</td>
<td>AZERTY</td>
<td>QWERTY</td>
<td>JJJJJJ</td>
</tr>
</tbody>
</table>
<div data-role="footer" data-id="foo2" data-position="fixed" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="accueil.html" data-icon="home" data-transition="slide">Accueil</a></li>
<li><a href="identificationElecteurs.html" data-icon="user" data-transition="slide">Identification</a></li>
<li><a href="resultatsScrutin.html" data-icon="action" data-transition="slide">Résultats</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
</body>
</html>
这是输出:
当我尝试其他模拟器时:
无论进行何种转换,我都希望页脚导航栏始终位于页面底部,我相信无论我们在什么设备上测试, data-position="fixed" 都应该可以解决问题,对吧?那么有什么问题呢?提前致谢 !