Make Iframe to fit 100% of container’s remaining height

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?

I tried set height:100% on iframe, the result is quite close but the iframe tried to fill the whole page height, including the 30px height of banner div element, so I got unneccessary vertical scrollbar. It’s not perfect.

Update Notes : Excuse me for not describing the question well, I tried CSS margin, padding attribute on DIV to occupy the whole remining height of a web page successfully, but the trick didn’t work on iframe.

  <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
  <iframe src="http: //" style="width:100%; height:100%;"></iframe>


Here are a few modern approaches:

- ### Approach 1 - Combination of viewport relative units / calc().

The expression calc(100vh - 30px) represents the remaining height. Where 100vh is the height of the browser and the usage of calc() effectively displaces the height of the other element.

Example Here

body { margin: 0; } .banner { background: #f00; height: 30px; } iframe { display: block; background: #000; border: none; height: calc(100vh - 30px); width: 100%; }

Support for calc() here; support for viewport relative units here.

- ### Approach 2 - Flexbox approach

Example Here

Set the display of the common parent element to flex, along with flex-direction: column (assuming you want the elements to stack on top of each other). Then set flex-grow: 1 on the child iframe element in order for it to fill the remaining space.

body {
  margin: 0;
.parent {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
.parent .banner {
  background: #f00;
  width: 100%;
  height: 30px;
.parent iframe {
  background: #000;
  border: none;
  flex-grow: 1;
<div class="parent">
  <div class="banner"></div>

Since this approach has less support1, I’d suggest going with the aforementioned approach.

1Though it seems to work in Chrome/FF, it doesn’t work in IE (the first method works in all current browsers).