title: How to resize iframe when parent window resizes
body: <p>I don't think this is not another "resize iframe according to content height" question.</p>
  
  <p>I actually want to resize the iframe dynamically according to a resize of the parent window. For JS Fiddle fans I have an example  <a href="http://jsfiddle.net/MkJVJ/" rel="noreferrer">here</a></p>
  
  <p>For those who want to look at the code on SO:</p>
  
  <pre><code>&lt;div id="content"&gt;
  &lt;iframe src="http://www.apple.com" 
          name="frame2" 
          id="frame2" 
          frameborder="0" 
          marginwidth="0" 
          marginheight="0" 
          scrolling="auto" 
          allowtransparency="false"&gt;
  &lt;/iframe&gt;
  
  &lt;/div&gt;
  
  &lt;div id="block"&gt;&lt;/div&gt;
  
  &lt;div id="header"&gt;&lt;/div&gt;
  
  &lt;div id="footer"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
  margin: 0px;
  padding-top: 78px;
  padding-right: 0px;
  padding-bottom: 25px;
  padding-left: 0px;
  min-height: 0px;
  height: auto;
  text-align: center;
  background-color: lightblue;
  overflow:hidden;
  }
  
  div#header {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 85px;
  min-width: 1000px;
  overflow: hidden;
  background-color: darkblue;
  }
  
  div#footer {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 25px;
  min-width: 1000px;
  background-color: darkblue;
  }
  
  iframe#frame2 {
  
  margin: 40px;
  position: fixed;
  top: 80px;
  left: 0px;
  width: 200px;
  bottom: 25px;
  min-width: 200px;
  }
  
  div#block {
  
  background-color: lightgreen;
  margin: 40px;
  position: fixed;
  top: 80px;
  left: 350px;
  width: 200px;
  bottom: 25px;
  min-width: 200px;
  }
  
  @media screen {
  body &gt; div#header {
  position: fixed;
  }
  body &gt; div#footer {
  position: fixed;
  }
  }
  </code></pre>
  
  <p>There may be a bit of odd CSS there - I cobbled it together from the actual page. Apologies.</p>
  
  <p>As you can see the green coloured div dynamically changes height accordingly when you resize the window. What I'd like to find out is if this can be done with the iframe to the left of the div. </p>
  
  <p>Can CSS alone make this happen?</p>