title: i need to have 2 iframes on one page, one top of the other
body: <p>So i need to create an html page with 2 iframes on one page, one top of the other... The top one will take up most of the page and the bottom one will be about 80px high... View JSFiddle below.</p>
  
  <p>The code i have seems to work but I notice when ever I scroll certain pages the scroll jumps around a bit... its not always a smooth scrolling experience... So my question is... </p>
  
  <p>Is there a better way of achieving what I am try to do? or is this the best way?</p>
  
  <p><strong><em>html</em></strong></p>
  
  <pre><code>&lt;div id="frame2"&gt;
     &lt;iframe name="frame2" src="" style="height: 80px; width: 100%; border: none;"&gt;&lt;/iframe&gt;
  &lt;/div&gt;&lt;!-- close div#frame2 --&gt;
  
  &lt;div id="frame1"&gt;
     &lt;iframe name="frame1" src="http://www.apple.com/" style="height: 100%; width: 100%; border: none;"&gt;&lt;/iframe&gt;
  &lt;/div&gt;&lt;!-- close div#frame1 --&gt;
  </code></pre>
  
  <p><strong><em>css</em></strong></p>
  
  <pre><code>#frame1 {
     background-color: #0099ff;
     position: absolute;
     top: 0px;
     left: 0px;
     bottom: 80px;
     right: 0px;
  }
  
  #frame2 {
     background-color: #000000;
     position: absolute;
     top: 0px;
     left: 0px;
     bottom: 0px;
     right: 0px;
  }
  </code></pre>
  
  <p>heres a jsfiddle (<a href="http://jsfiddle.net/jstormthakid/TMSwq/" rel="nofollow">http://jsfiddle.net/jstormthakid/TMSwq</a>) of the code also.</p>
  
  <p><strong><em>Any help would be greatly appreciated...</em></strong></p>