title: CSS fill parent available space
body: <p>I know that question asked a lot of times, but I didn't found solution to my problem.</p>
  
  <p>I have this html code:</p>
  
  <pre><code>&lt;html style="height: 100%"&gt;
      &lt;body style="height: 100%"&gt;
          &lt;div style="height: 100%"&gt;
              &lt;div&gt;Title&lt;/div&gt;
              &lt;div style="height: 100%"&gt;Content&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want that my DIV with the content will fill the rest space in the parent div.<br>
  Every question that I saw before said to do <code>style="height: 100%"</code> in the child DIV.
  With <code>style="height: 100%"</code> it gets the <strong>same size</strong> of the parent div, so my page became larger then 100% (the page have scrollbar).</p>
  
  <p><img src="https://i.stack.imgur.com/NxNtC.png" alt="height: 100%"></p>
  
  <p>(The html, body and parent div tags are same as the viewport)</p>
  
  <p>I just want to fill the parent div with the available free space, not more than that.</p>
  
  <p><img src="https://i.stack.imgur.com/NPh4N.png" alt="fill available space"></p>
  
  <p>And <a href="http://jsfiddle.net/JD5N8/" rel="nofollow noreferrer">here</a> you can find live example.</p>
  
  <p>Can I do it?</p>