title: iOS Safari top and bottom bar issue
body: <p>I have a an application that has three fixed sections:</p>
  
  <p>1) Header - Top</p>
  
  <p>2) Main content - Center</p>
  
  <p>3) Footer - Bottom</p>
  
  <p>The main content scrolls using <code>overflow: auto</code> and has the scroll bar contained within its own dimensions rather than the entire body (which is what i want). However because of my app structure, scrolling the main content area, safari on iOS doesn't hide the <code>top address bar</code> and <code>bottom action bar</code>. </p>
  
  <p>I have tried several suggestion found in blog posts and stackoverflow but none has worked. </p>
  
  <p>Anyone who has faced similar issue and resolved it please kindly shine some light :) </p>
  
  <p><strong>Here are some solutions that i have tried:</strong></p>
  
  <p>1) Adding 44px <code>padding-bottom</code> on <code>&lt;body&gt;</code></p>
  
  <p>2) Adding 44px <code>padding-bottom</code> on <code>&lt;html&gt;</code></p>
  
  <p>3) Using <code>&lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;</code></p>
  
  <p>4) JS snippet to <code>window.scrollTo(0, 1)</code> wrapped in <code>setTimeout</code></p>
  
  <p><em>None of the above has worked for me.</em></p>