title: Make Iframe to fit 100% of container's remaining height
body: <p>I want to design a web page with a banner and an iframe. I hope the iframe can fill all the remaining page height and be resized automatically as the browser is resizing. Is it possible to get it done without writing JavaScript code, only with CSS?</p>
  <p>I tried to set <code>height:100%</code> on iframe, the result is quite close but the iframe tried to fill the whole page height, including the <code>30px</code> height of banner div element, so I got unnecessary vertical scrollbar. It's not perfect.</p>
  <p>I tried CSS margin, padding attribute on DIV to occupy the whole remaining height of a web page successfully, but the trick didn't work on iframe.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;body&gt;
      &lt;div style="width:100%; height:30px; background-color:#cccccc;"&gt;Banner&lt;/div&gt;
      &lt;iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"&gt;&lt;/iframe&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>