title: How to set the iframe height & width to 100%
body: <p>I am in need of doing the following:</p>
  
  <ol>
  <li>I have a header content which is 70px and an iframe with a wrapper.
  The height &amp; width of the iframe has to be set to 100% without
  scroll, except for the scroll that comes for the body when the
  content is loaded and the size of the content is more.</li>
  <li>The content of the iframe is another HTML page from the same domain.
  The iframe also needs to scale according to the responsive HTML
  page.</li>
  </ol>
  
  <p>Can any one help?</p>
  
  <p>Things I cannot use:</p>
  
  <p>Position:Fixed;(mainly due to a script that i am using for the sideslidebars</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Bus Management System&lt;/title&gt;
      &lt;!-- Viewport meta tag to prevent iPhone from scaling our page --&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
  
  
       &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
       $(function(){
  
              var iFrames = $('iframe');
  
              function iResize() {
  
                  for (var i = 0, j = iFrames.length; i &lt; j; i++) {
                    iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
                  }
  
                  if ($.browser.safari || $.browser.opera) { 
  
                     iFrames.load(function(){
                         setTimeout(iResize, 0);
                     });
  
                     for (var i = 0, j = iFrames.length; i &lt; j; i++) {
                          var iSource = iFrames[i].src;
                          iFrames[i].src = '';
                          iFrames[i].src = iSource;
                     }
  
                  } else {
                     iFrames.load(function() { 
                         this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
                     });
                  }
  
              });
  &lt;/script&gt;
  
  
    &lt;/head&gt;
  
      &lt;style type="text/css" media="all"&gt;
          html, body, iframe {width:100%; height:100%;box-sizing:border-box; margin:0; padding:0; border:0;}
          body {border:4px solid green;}
          iframe {border:6px solid red;width:100%; height:100%;display:block;}
          #wrapper {border:2px solid blue; width:100%; height:100%;}
  
      &lt;/style&gt;
      &lt;body&gt;
          &lt;div style="height:50px; background-color:#000; color:#fff;"&gt;Header&lt;/div&gt;
  
              &lt;iframe src="http://www.google.com" style="width:100%; height:100%;" onLoad="calcHeight();"&gt;&lt;/iframe&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;   
  </code></pre>