<!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> |