title: iFrame width-100% Height-100%
body: <p>I was hoping someone could help me, as I have limited html knowledge. I am using an iFrame to open up other pages internal and external. I have got the iFrame to open up width 100% and height 100%, however I am having the following problems and was hoping someone could tweak my code.</p>
  
  <p>I have a header, then iFrame and then a grey footer. My problem is this</p>
  
  <ol>
  <li><p>The footer does not move down when the iframe opens a child page, this causes an extra scrollbar to appear, one for the iFrame the other for the footer.</p></li>
  <li><p>I child page is not showing fully in the iFrame, its footer seems to be slightly clipped at the bottom.</p></li>
  <li><p>Is there a way no to have any scroll bars and the iframe to expand fully to the child page size</p></li>
  </ol>
  
  <p>See example below - 
  <a href="http://weblocker.co.uk/IFRAME%20-%20Copy/index.html" rel="nofollow">With Grey Footer</a></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Untitled Page&lt;/title&gt;
      &lt;meta name="generator" content="Web Builder 11"&gt;
      &lt;link href="css/inline_frame.css" rel="stylesheet"&gt;
      &lt;link href="css/index.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="container"&gt;
        &lt;iframe name="InlineFrame1" id="InlineFrame1" style="position:fixed;left:0px;right;0px;bottom:0px;top:95px;width:100%;height:100%;z-index:1;" src="./page1.html"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
      &lt;div id="PageHeader1" style="position:absolute;text-align:left;left:0px;top:0px;width:100%;height:100px;z-index:7777;"&gt;
        &lt;div id="wb_CssMenu1" style="position:absolute;left:30px;top:70px;width:375px;height:30px;z-index:0;"&gt;
          &lt;ul&gt;
            &lt;li class="firstmain"&gt;&lt;a href="./page1.html" target="InlineFrame1"&gt;Item&amp;nbsp;1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="http://go.microsoft.com/fwlink/p/?LinkId=255142" target="InlineFrame1"&gt;Item&amp;nbsp;2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="http://www.aljazeera.com/news/" target="InlineFrame1"&gt;Item&amp;nbsp;3&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="http://www.bbc.co.uk/news" target="InlineFrame1"&gt;Item&amp;nbsp;4&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="PageFooter1" style="position:absolute;overflow:hidden;text-align:left;left:0px;top:530px;width:100%;height:210px;z-index:2;"&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In the second example below I have removed the footer but still have problems 2 and 3 from above. I do want my own footer</p>
  
  <p><a href="http://weblocker.co.uk/IFRAME/index.html" rel="nofollow">No Footer</a></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Untitled Page&lt;/title&gt;
      &lt;meta name="generator" content="Web Builder 11"&gt;
      &lt;link href="css/inline_frame.css" rel="stylesheet"&gt;
      &lt;link href="css/index.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="container"&gt;
        &lt;iframe name="InlineFrame1" id="InlineFrame1" style="position:fixed;left:0px;right;0px;bottom:0px;top:95px;width:100%;height:100%;z-index:1;" src="./page1.html"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
      &lt;div id="PageHeader1" style="position:absolute;text-align:left;left:0px;top:0px;width:100%;height:100px;z-index:7777;"&gt;
        &lt;div id="wb_CssMenu1" style="position:absolute;left:30px;top:70px;width:375px;height:30px;z-index:0;"&gt;
          &lt;ul&gt;
            &lt;li class="firstmain"&gt;&lt;a href="./page1.html" target="InlineFrame1"&gt;Item&amp;nbsp;1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="http://go.microsoft.com/fwlink/p/?LinkId=255142" target="InlineFrame1"&gt;Item&amp;nbsp;2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="http://www.aljazeera.com/news/" target="InlineFrame1"&gt;Item&amp;nbsp;3&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="http://www.bbc.co.uk/news" target="InlineFrame1"&gt;Item&amp;nbsp;4&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I would greatly appreciate if anyone could tweak my code</p>