Flexible Rows Using Display:Table

HTML

<body>
  <div class="outer">
    <div class="banner">Banner</div>
    <div class="iframe-container">
      &nbsp;
    </div>
  </div>
</body>

CSS

body, html {
  height:100%;
  padding:0;
  margin:0;
}
div {
  padding:0;margin:0;
}
.outer {
  display: table;
  height: 100%;
  width: 100%;
}

.banner {
  display: table-row;
  height: 30px;
  background: #eee;
}

.iframe-container {
  display: table-row;
  height: 100%;
  background:#ccc;
}

iframe {
  height: 100%;
  width: 100%;
  border: 0;
  margin: 0;
  position:relative;
}