title: Adaptive vertical scrollbar for jQuery Mobile tab content when navbar is in header
body: <p>In some jQuery mobile tabs I have content that requires a scrollbar.</p>
  
  <p>The navbar that controls them is in the header like in <a href="http://jsfiddle.net/VjYq9/1/" rel="nofollow">this fiddle</a>.</p>
  
  <p>I have tried to set <code>height: 100%; overflow: auto;</code> on all levels of the tab content, but the scrollbar is still applied to the page as a whole.</p>
  
  <p>How can an overflowing scrollbar be adaptively applied to tabbed content only?</p>
  
  <p><a href="http://jsfiddle.net/VjYq9/1/" rel="nofollow">jsFiddle</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div data-role="page" id="mainPage"&gt;
      &lt;div data-role="tabs" id="tabs"&gt;
          &lt;div data-role="header" style="overflow:hidden;"&gt;
              &lt;h1&gt;I'm a header&lt;/h1&gt;
              &lt;a href="#" data-icon="gear" class="ui-btn-right"&gt;Options&lt;/a&gt;
              &lt;div data-role="navbar"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#one" class="ui-btn-active"&gt;One&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#two"&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;/div&gt;
          &lt;div id="one" class="ui-body-d ui-content tabContent"&gt;
              &lt;h1&gt;First tab contents&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div id="two"&gt;
              &lt;ul data-role="listview" data-inset="true"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Acura&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Audi&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;BMW&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Cadillac&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ferrari&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function() {
      var $one = $('#one')
      for(var i=0; i&lt;1000; i++){
          $one.append('&lt;br/&gt;content')
      }
  
  })
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body{
      overflow:hidden;
  }
  .tabContent{
      height:100%;
      overflow:auto;
  }
  </code></pre>