title: Jquery Mobile panel scrolls with content
body: <p>Using Jquery Mobile, I have a panel div to create a navigation system and set the height of it to be 100% of the browser. If the content exceeds the height of the panel, the css overflow-y property lets the user scroll to see the hidden content. Pretty simple right?
  <BR><BR>
  Now here is where I'm getting in to some trouble, while the css overflow-y property works fine on iOS devices, Android is giving me some trouble. While the user is able to scroll the panel to see hidden content, the actual content div (<code>div data-role="content</code>) also scrolls. So if I have 10 items that I have to scroll to in the panel, the main content div will also scroll until I reach the end.<BR><a href="http://jsfiddle.net/pHtxe/1/" rel="nofollow">Heres a link to a demo</a>
  <br>
  If you view this on a android device you'll see the issue I'm talking about. What I want to know if this is a problem from Android, Jquery, or something else. I'm using Android 4.1, JQM 1.3.2, and Jquery 1.9.1</p>
  
  <p>CSS</p>
  
  <pre><code>.ui-panel { overflow-y:scroll; }
  </code></pre>
  
  <p>JS (for setting the height of the panel)</p>
  
  <pre><code>$(function(){
    $('.ui-panel').css({'height':($(document).height())+'px'});
    $(window).resize(function(){
      $('.ui-panel').css({'height':($(document).height())+'px'});
    });
  });
  </code></pre>