I acknowledge that there have been previous inquiries regarding the same matter.
My intention is neither to modify any original code nor add any additional style.
In reference to this webpage:
According to the information provided, all I need to do is copy the given code and paste it into my HTML document.
Here's the implementation I have applied:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<!-- End of CSS -->
<!-- Javascripts -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="<?php echo base_url('Assets/js/defaults/jquery-mobile.js');?>"></script>
<!-- End of Js -->
</head>
This is the corresponding HTML implementation:
<div data-role="page">
<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>……(omitted for brevity)……
</div>
<div data-role="content">
<p>Some Content here</p>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="a.html">Info</a></li>
<li><a href="b.html">Friends</a></li>
<li><a href="c.html">Albums</a></li>
<li><a href="d.html">Emails</a></li>
</ul>
</div>……(omitted for brevity)……
</div><!-- End of footer -->
</div>
However, the footer does not appear at the bottom as expected. Instead, it is positioned somewhere in the middle.
I am currently using the latest version of jQuery Mobile.
Do you have any suggestions or ideas?