title: jQuery mobile page height
body: <p>For the past day I have been trying to figure out how to change the min-height styling on a jQuery mobile page when viewing in mobile safari. I have tried, inline styles, overriding ui-page styles and have yet to find a way to override the height of data-role="page". Ideally if the page "content" is less than the "page" height I would like the "page" height to automatically adjust to the "content". I have attached an illustration to better explain the issue.</p>
  
  <p><img src="https://i.stack.imgur.com/1L5MR.jpg" alt="jQuery Webpage Diagram"></p>
  
  <pre><code>&lt;div data-role="page"&gt;
       &lt;div data-role="header"&gt;
               Header Elements
       &lt;/div&gt;
       &lt;div data-role="content" class="homeNav"&gt;
              &lt;ul data-role="listview" data-inset="false" data-filter="false"&gt;
                  &lt;li&gt;&lt;a href="expertise.html"&gt;Expertise&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="greatesthits.html"&gt;Greatest Hits&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="profile.html"&gt;Profile&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="mindset.html"&gt;Mindset&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="connect.html"&gt;Connect&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;  
       &lt;/div&gt;&lt;!-- /content --&gt;
  
       &lt;div data-role="footer" data-position="fixed"&gt;
               Footer elements
       &lt;/div&gt;&lt;!-- /footer --&gt;
  &lt;/div&gt;&lt;!-- /page --&gt;
  </code></pre>