title: Programmatically add fixed footer in JqueryMobile
body: <p>i try to add footer in my jquery mobile page programmatically.</p>
  
  <p>Here is my code to add html markup for footer and trigger the "create" function of jquerymobile again to populate the style for the footer. </p>
  
  <pre><code>            menu += '&lt;div data-role="footer" data-position="fixed" id="menu" data-theme="a"&gt;';
              menu +=     '&lt;div data-role="navbar"&gt;';
              menu +=         '&lt;ul&gt;';
              menu +=             '&lt;li&gt;&lt;a href="'+GLOBAL.APP_ROOT+'simulator/list1"&gt;List1&lt;/a&gt;&lt;/li&gt;';
              menu +=             '&lt;li&gt;&lt;a href="'+GLOBAL.APP_ROOT+'simulator/list2"&gt;List1&lt;/a&gt;&lt;/li&gt;';
              menu +=             '&lt;li&gt;&lt;a href="'+GLOBAL.APP_ROOT+'simulator/list3"&gt;List3&lt;/a&gt;&lt;/li&gt;';
              menu +=         '&lt;/ul&gt;';
              menu +=     '&lt;/div&gt;';
              menu += '&lt;/div&gt;';
              $('#pHome').append(menu).trigger('create');
  </code></pre>
  
  <p>My problem is, the footer doesn't appear at the bottom of the page, it appears right after the content div. I think that i have to update the position of the footer div manually but don't know how to do that. Can anyone help me?</p>