title: Take all available viewport height via CSS
body: <p><img src="https://i.stack.imgur.com/r84Ze.png" alt="Illustration"></p>
  
  <p>Is there is a way to force div to take all available height <strong>not knowing</strong> heights of elements above?</p>
  
  <p>If height is known, than vh units can be used, for example if #header's height is 30px, I can apply <code>height: 100vh - 30px;</code> to #view.</p>
  
  <p>I made small example in <a href="http://jsfiddle.net/5eoe6xLp/6/" rel="nofollow noreferrer">jsFiddle</a>:</p>
  
  <pre><code>&lt;div id="header"&gt;
      Header
  &lt;/div&gt;
  &lt;div id="view"&gt;
      View
  &lt;/div&gt;
  
  #header {
      height: 50px;
  }
  #view {
      height: calc(100vh - 50px);
  }
  </code></pre>