title: CSS, Stretching vertically div until it reach the height of its parent
body: <p>Wrapped in a <code>pageWrapper</code> container, I have 3 divs in a column. First (header) and last (navWrapper) have fixed heights. I need the middle one (<code>contentWrapper</code>) to stretch in height until the parent div pageWrapper reaches the maximum height (<em>according to the browser's viewport</em>).</p>
  
  <p>I draw the <em>schema</em> of this problem.
  <img src="https://i.stack.imgur.com/T8PeK.png" alt="enter image description here"></p>
  
  <p>Here is a <strong>fiddle of my current solution.</strong> 
  <a href="http://jsfiddle.net/xp6tG/" rel="noreferrer">http://jsfiddle.net/xp6tG/</a></p>
  
  <p>and here the code</p>
  
  <p>CSS and HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body{
    height: 100%;
  }
  
  body{
    background-color: #E3E3E3;
  }
  
  #pageWrapper{
    margin: 0 auto;
    position: relative;
    width: 600px;
    height: 100%;
  }
  
  header{ 
    display:block;
    width: 100%;
    height: 100px;
    background: yellow;
  }
  
  #contentWrapper{
    width: 100%;
    height: 100%;
    background: blue;
  }
  
  #navWrapper{
    width: 100%;
    height: 100px;
    background: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="pageWrapper"&gt;
    &lt;header&gt;
      Header
    &lt;/header&gt;
    &lt;div id="contentWrapper"&gt;
      Content
    &lt;/div&gt;
    &lt;div id="navWrapper"&gt;
      Nav
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It is almost working, but it results in too high height, which causes that a vertical scrollbar appears.</p>