I have a listview on my page that I fill with data on the 'pagebeforecreate' event.  I also have a fixed footer on the page.  The problem is the footer gets pushed down and scrolls with the page when the page is done loading. The footer stays fixed to the bottom on all other pages that have dynamic data that is not a listview. So it just seems like its only the listview that is messing with the footer.  If there are only a couple items in the listview the footer behaves as expected.  Any suggestions?

HTML:

1. <div id="myPage" data-role="page" data-theme="b">
2.       <div data-role="header" data-position="fixed" data-theme="b">
3.         Header text
4.       </div>
5.       <div data-role="content">
6.         <ul id="myList" data-role="listview" data-filter="true"
7.              data-inset="true"  data-theme="b"></ul>
8.       </div>     
9.       <div data-role="footer" data-position="fixed">
10.        Footer text
11.       </div>
12. 
    
13.       <script>
14.          $(document).on("pagebeforecreate", "#myPage", function(event) {       var theData= window.localStorage.getItem("MYDATA");       $("#myList").empty().append(theData);       });
15.       </script>
16. 
    
17. </div>