title: Stretching iframe in HTML5
body: <p>I have two html files, one contains the other with an iframe, and I want to make this iframe stretch over the full height of the parent html.</p>
  
  <p>So the first html file (which has a red background) look like:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body style="background-color: red; margin: 0px; padding: 0px;"&gt;
      &lt;iframe src="Blue.html" frameborder="0" scrolling="no"  height="100%" width="100%" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The second (which has a blue background):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;    
  &lt;body style="background-color: blue;" /&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If all things are correct I expect to see only a blue background, because the iframe should overlap the entire parent page, but I see only a strip of blue, and a whole lot of red..</p>
  
  <p>With the HTML5 doctype <code>&lt;!DOCTYPE html&gt;</code> I cannot seem to be getting the correct result:</p>
  
  <p><img src="https://i.stack.imgur.com/Rwejs.png" alt="With HTML5 DOCTYPE"></p>
  
  <p>If I remove the HTML5 doctype I get the result I want. I think this is because it will render the HTML in quirks mode:</p>
  
  <p><img src="https://i.stack.imgur.com/CdeVa.png" alt="Without HTML5 DOCTYPE"></p>
  
  <p>I do want the HTML doctype though, so how can I fix this? Thanks for looking!</p>