title: Help with mobile page, fixed div at top and iframe below
body: <p>Hi I'm looking help with a mobile site I'm developing.  I'm trying to get a page with a toolbar at the top of the screen that has previous and next buttons, with most of the viewport displaying an iframe containing 3rd party websites.</p>
  
  <p>I have a few issues getting this working.  The first is to have the toolbar fixed at the top.  Mobile browsers don't natively support fixed positioning so I've achieved a workable solution where I move the toolbar back to the top of the screen with the window.onresize event.  I can't move the div while scrolling as mobile browsers disable DOM rendering between the touchstart and touchend events.</p>
  
  <p>The main issue I am now having is that the div toolbar displays correctly at the top however the iframe is zoomed to the top left corner of the site it has loaded.  You cannot zoom out at all.  You can only zoom in further and pan the site.  You can only really view the iframe site in 100% of the viewport when it's loaded by itself.</p>
  
  <p>Here's a wireframe of what I want to achieve..</p>
  
  <p><img src="https://i.stack.imgur.com/Fzihs.png" alt="enter image description here"></p>
  
  <p>Any help would be much appreciated!</p>
  
  <p>Here's an idea of the code I'm using to achieve this..</p>
  
  <p>There's also javascript that modifies the top and left css values of #wrapper when you scroll the screen using the window.onresize event.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta
       name="viewport"
       content="width=device-width; 
               initial-scale=1;
               maximum-scale=1;
               minimum-scale=1; 
               user-scalable=yes;"
      /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="wrapper" style="width:320px;top:0;height:86px; position:absolute; z-index:1000; background-color:#FFFFFF; border-bottom:5px solid #4B90B7;"&gt;
  &lt;!-- Header markup --&gt;
  &lt;/div&gt;
  &lt;div id="iframe" style="height: 750px;position:absolute; top:100px; width:100%" &gt;
  
  &lt;iframe style="width:100%; height:100%"&gt;
  &lt;!-- iframe --&gt;
  &lt;/iframe&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>