title: CSS Custom div height
body: <p>I have simple layout and I'm trying to expand div's height to given % so I can put later scalled background img using backgound-size. </p>
  
  <p>In example I wanna have div1 expand to 69%.</p>
  
  <p>Why it doesn't work and how to fix it?</p>
  
  <p>Link: <a href="https://jsfiddle.net/mc6ecstr/" rel="nofollow">https://jsfiddle.net/mc6ecstr/</a></p>
  
  <h2>CSS:</h2>
  
  <pre><code>body
  {
      color: white;
      margin: 0px;
      padding: 0px;
      height: 1080px;
  }
  #container
  {
      width: 100%;
      height: 100%;
  }
  #header
  {
      background-color: blue;
      width: 100%;
  }
  #div1 {
      background-color: red;
      float: left;
      width: 15.67%;
      margin-left: 1.5%;
      height: 69%; /*doesnt work*/
  
  }
  #div2 {
      background-color: green;
      float: right;
      width: 43.17%;
      margin-right: 3.6%;
  }
  </code></pre>
  
  <h2>HTML:</h2>
  
  <pre><code>&lt;body&gt;
      &lt;div id="header"&gt;Header&lt;/div&gt;
      &lt;div id="container"&gt;
          &lt;div id="div1"&gt;1&lt;/div&gt;
          &lt;div id="div2"&gt;2&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>