title: How to stretch vertical scroll?
body: <p><a href="http://jsfiddle.net/dy3ed5px/10/" rel="nofollow">here</a> I put some simple example of standard layout (header, content with scrollable div, footer)</p>
  
  <p>I stuck with css puzzle - how stretch the scroll div <code>div#content &gt; div#scroll</code> so that it fills the page up to the footer?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div#page { /* aka html */
      height          : 100%;
      width           : 100%;
   margin          : 0 auto;
      box-sizing      : border-box;
      overflow        : auto;
  }
  
  div.cleaner {
      clear : both;
  }
  
  header {
      display   : block;
      width     : 100%;
  }
  
  header &gt; div#left_head {
      float      : left;
      width      : 50%;
      box-sizing : border-box;
      border     : dotted blue 1px;
  }
  
  header &gt; div#right_head {
      float      : right;
      width      : 50%;
      box-sizing : border-box;
      text-align : right;
      border     : dotted blue 1px;
  }
  
  footer {
      display   : block;
      width     : 100%;
      position  : absolute;
      left      : 0px;
      bottom    : 0px;
  }
  
  footer &gt; div#left_foot {
      float      : left;
      width      : 50%;
      box-sizing : border-box;
      border     : dotted green 1px;
  }
  
  footer &gt; div#right_foot {
      float      : right;
      width      : 50%;
      box-sizing : border-box;
      text-align : right;
      border     : dotted green 1px;
  }
  
  /*----------------&gt;8---------------*/
  
  div#content {
      width  : 90%;
      margin : 0 auto;
      border : dotted black 1px;
  }
  
  div#content &gt; div#scroll {
      height    : 200px;
      overflow-y: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="page"&gt;
      &lt;header&gt;
          &lt;div id="left_head"&gt;
              &lt;span&gt;here is left header&lt;/span&gt;
          &lt;/div&gt;
          &lt;div id="right_head"&gt;
              &lt;span&gt;here is right header&lt;/span&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;div id="dummy" class="cleaner" /&gt;
      
      &lt;div id="content"&gt;
          &lt;div id="scroll"&gt;
              &lt;p&gt;scrollable content&lt;/p&gt;
              &lt;p&gt;scrollable content&lt;/p&gt;
              &lt;p&gt;scrollable content&lt;/p&gt;
              &lt;p&gt;scrollable content&lt;/p&gt;
              &lt;p&gt;scrollable content&lt;/p&gt;
              &lt;p&gt;scrollable content&lt;/p&gt;
              &lt;p&gt;scrollable content&lt;/p&gt;
              &lt;p&gt;scrollable content&lt;/p&gt;
              &lt;p&gt;scrollable content&lt;/p&gt;
              &lt;p&gt;scrollable content&lt;/p&gt;
              &lt;p&gt;scrollable content&lt;/p&gt;
              &lt;p&gt;scrollable content&lt;/p&gt;
              &lt;p&gt;scrollable content&lt;/p&gt;
              &lt;p&gt;scrollable content&lt;/p&gt;
              &lt;p&gt;scrollable content&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;footer&gt;
          &lt;div id="left_foot"&gt;
              &lt;span&gt;here is left foot&lt;/span&gt;
          &lt;/div&gt;
          &lt;div id="right_foot"&gt;
              &lt;span&gt;here is right foot&lt;/span&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the given example I constrained the height by hard-codded value of 200px.</p>
  
  <p>any ideas, comments - appreciated. </p>
  
  <p>thank you!</p>