<!DOCTYPE html>
<!--
iframes have an intrinsic size of 300x150
-->
<style>
    body * {
      border: 2px solid red;
      padding: 5px;
      clear: both;
    }

    .container {
      height: 600px;
      border-color: blue;

      display: inline-block;
      width: 100px;
    }

    .position-container {
      border-color: green;
      position: relative;
      height: 180px;
    }

    .position-container > * {
      position: absolute;
      border: 5px solid pink;
      width: 50px;
    }

    .f-a-container {
      height: 100%;
      box-sizing: border-box;
    }

    .fill-available {
      height: 586px;
      width: 70px;
      box-sizing: border-box;
    }
</style>
<div class="container">
  <div class="position-container">
    <iframe>
    </iframe>
  </div>
  <div class="position-container">
    <iframe>
    </iframe>
  </div>
  <div class="position-container">
    <iframe>
    </iframe>
  </div>
</div>

<div class="container">
  <div class="position-container f-a-container">
    <iframe class="fill-available">
    </iframe>
  </div>
</div>

<div class="container">
  <div class="position-container">
    <iframe>
    </iframe>

  </div>
  <div class="position-container">
    <iframe>
    </iframe>

  </div>
  <div class="position-container">
    <iframe>
    </iframe>
  </div>
</div>

<div class="container">
  <div class="position-container f-a-container">
    <iframe class="fill-available">
    </iframe>
  </div>
</div>

<div class="container">
  <div class="position-container">
    <iframe>
    </iframe>

  </div>
  <div class="position-container">
    <iframe>
    </iframe>

  </div>
  <div class="position-container">
    <iframe>
    </iframe>
  </div>
</div>

<div class="container">
  <div class="position-container f-a-container">
    <iframe class="fill-available">
    </iframe>
  </div>
</div>
