title: jQuery-mobile Footer issue, again
body: <p>I am aware of all the previous questions that asks the exact same thing.</p>
  
  <p>I am not trying to change any original code, or to add any extra style in.</p>
  
  <p>According to this page:</p>
  
  <p><a href="http://view.jquerymobile.com/1.3.0/docs/widgets/navbar/footer-persist-a.php" rel="nofollow noreferrer">http://view.jquerymobile.com/1.3.0/docs/widgets/navbar/footer-persist-a.php</a></p>
  
  <p>All I need to do is to copy the code given, and paste it into my HTML. </p>
  
  <p>I done this:</p>
  
  <pre><code>&lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
          &lt;!-- CSS --&gt;
          &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /&gt;
          &lt;!-- CSS end --&gt;
  
          &lt;!-- Javascripts --&gt;
              &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="&lt;?php echo base_url('Assets/js/defaults/jquery-mobile.js');?&gt;"&gt;&lt;/script&gt;
          &lt;!-- Js End --&gt;
      &lt;/head&gt;
  </code></pre>
  
  <p>Here's the HTML</p>
  
  <pre><code>&lt;div data-role="page"&gt;
      &lt;div data-role="header"&gt;
          &lt;div data-role="navbar"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#" class="ui-btn-active"&gt;One&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!-- /navbar --&gt;  
      &lt;/div&gt;
  
      &lt;div data-role="content"&gt;       
          &lt;p&gt;Some Content here&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div data-role="footer" data-id="foo1" data-position="fixed"&gt;
          &lt;div data-role="navbar"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="a.html"&gt;Info&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="b.html"&gt;Friends&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="c.html"&gt;Albums&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="d.html"&gt;Emails&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!-- /navbar --&gt;
      &lt;/div&gt;&lt;!-- /footer --&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And the footer is nowhere close to the bottom. It's hanging somewhere in the middle, in fact.</p>
  
  <p>I am using the lastest jquery mobile.</p>
  
  <p>Any ideas?
  <img src="https://i.stack.imgur.com/6PJUl.png" alt="enter image description here"></p>