title: iframe not sizing properly in Chrome
body: <p>I have an <code>iframe</code> element which sizes properly in Safari 5.1.5, but not in Chrome. </p>
  
  <p>The CSS for this element is:</p>
  
  <pre><code>iframe {
    overflow: hidden; 
    width: 100%;
    height: 80%;
    border: 1px solid #DEDEDE;
    background: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  </code></pre>
  
  <p>The HTML is:</p>
  
  <pre><code>&lt;iframe marginwidth="0" marginheight="0" scrolling="no" src="foo" height="80%" width="100%"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>In Safari, the element looks as expected, like this:</p>
  
  <p><img src="https://i.stack.imgur.com/tMT5r.png" alt="Safari snapshot"></p>
  
  <p>If I resize the browser, the <code>iframe</code> is resized.</p>
  
  <p>In Chrome, the element looks much shortened, compared with the Safari result:</p>
  
  <p><img src="https://i.stack.imgur.com/CZjEa.png" alt="enter image description here"></p>
  
  <p>Also, resizing the browser window does not change the size of the <code>iframe</code> element.</p>
  
  <p>Is there something I'm missing with my <code>iframe</code> setup, which Chrome doesn't like? Thanks for your advice.</p>