title: CSS - Fill remaining space if it's avaliable
body: <p>I'm trying to create a mosaic of options with images of different sizes, so the free vertical space needs to be filled. Is there any way using CSS or do I need to use JavaScript somehow?</p>
  
  <p>Image: <a href="http://imgur.com/TQYsNNC" rel="nofollow">http://imgur.com/TQYsNNC</a></p>
  
  <pre><code>&lt;style&gt;
    .options {
      width: 1230px;
      height: 100%;
      margin: auto;
      position: relative;
    }
  
    #stream .large {
      width: 400px;
      height: 575px;
      opacity: 0.8;
      position: relative;
      float: left;
      background: white;
    }
  
    #stream .big {
      width: 400px;
      height: 380px;
      margin-bottom: 10px;
      opacity: 0.8;
      position: relative;
      float: left;
      background: white;
    }
  
    #stream .medium {
      width: 400px;
      height: 185px;
      background: white;
      margin-bottom: 10px;
      opacity: 0.8;
      position: relative;
      float: left;
    }
  
    #stream .small {
      width: 195px;
      height: 185px;
      background: white;
      margin-bottom: 10px;
      opacity: 0.8;
      position: relative;
      float: left;
    }
  &lt;/style&gt;
  </code></pre>