title: Relative div height
body: <p>I want to split up the view in four parts. A header at the top, using full page width and fixed height.</p>
  
  <p>The remaining page is split up in two blocks of the same height, the upper of them contains two same-sized blocks next to each other.</p>
  
  <p>What I tried is (without the header):</p>
  
  <pre class="lang-css prettyprint-override"><code>#wrap {
    width: 100%;
    height: 100%;
  }
  
  #block12 {
    width: 100%;
    max-height: 49%;
  }
  
  #block1,
  #block2 {
    width: 50%;
    height: 100%;
    float: left;
    overflow-y: scroll;
  }
  
  #block3 {
    width: 100%;
    height: 49%;
    overflow: auto;
    /*background: blue;*/
  }
  
  .clear {
    clear: both;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="wrap"&gt;
    &lt;div id="block12"&gt;
      &lt;div id="block1"&gt;&lt;/div&gt;
      &lt;div id="block2"&gt;&lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="block3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Apparently, using a percentage value for the height won't work that way. Why is that so?</p>