title: Make #div (%) fill out rest of wrapper div
body: <p>Working on a fullpage ("locked") design.</p>
  
  <p>Here's what I'm working with:
  <a href="http://jsfiddle.net/5yex5nfu/" rel="nofollow">http://jsfiddle.net/5yex5nfu/</a></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="navigation"&gt;
          Nav
      &lt;/div&gt;
      &lt;div id="main"&gt;
          Main
      &lt;/div&gt;
      &lt;div id="footer"&gt;
          Footer
      &lt;/div&gt;
  &lt;/div&gt;
  
  body {
      height: 100%;
      width: 100%;
      margin: 0px;
  }
  
  #wrapper {
      display: block;
      position:absolute;
      height:auto;
      bottom:0;
      top:0;
      left:0;
      right:0;
      margin-top:50px;
      margin-bottom:50px;
      margin-right:50px;
      margin-left:50px;
      background-color: lightblue;
  }
  
  #navigation, #footer {
      width: 100%;
      height: 70px;
      background: pink;
  }
  
  #main {
      height: auto;
      background: lightgreen;
  }
  </code></pre>
  
  <p>I want the main div to fill out the rest of the "locked" div, with a %-value; whilst the footer and navigation hade assigned px-values.</p>
  
  <p>Have seen a few solutions for my problem, but none of them seems to work. Have tried to set a %-value for every div, and it works, but as expected: The whole thing scales and messes up the layout.</p>