title: CSS: make middle div take whole free space of the window height (min-height)
body: <p>Can anyone help me with position my content block?
  It looks good if there are a lot of content, but not when window higher than content block.
  Actualy I need that "content" block on my picture teked all free space (height) and thats why footer stick to the bottom.</p>
  
  <p><img src="https://i.stack.imgur.com/UfKZx.png" alt="enter image description here"></p>
  
  <p>I have next HTML markup:</p>
  
  <pre><code>&lt;div&gt;
      &lt;header&gt;&lt;/header&gt;
      &lt;nav class="breadcrumbing"&gt;&lt;/nav&gt;
      &lt;section class="left_nav"&gt;&lt;/section&gt;
      &lt;section class="content"&gt;&lt;/section&gt;
      &lt;footer&gt;&lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With this CSS: </p>
  
  <pre><code>html,body{width:100%;margin:0;padding:0;}
  body{background-color:#629302}
  body&gt;div{width:400px;height:100%;margin:0 auto;background-color:#FFF;}
  body&gt;div&gt;header{height:50px;background-color:#9dc155}
  body&gt;div&gt;nav.breadcrumbing{display:block;height:10px;margin:0;padding:0;}
  body&gt;div&gt;section.left_nav{width:172px;margin:8px 20px;float:left;background-color:#cdef88}
  body&gt;div&gt;section.content{width:168px;float:left;}
  body&gt;div&gt;footer{padding:19px 19px 22px;background-color: #e58b04;clear:left;}
  </code></pre>
  
  <p>I allready tried answers from <a href="https://stackoverflow.com/questions/4514322/is-it-possible-to-get-a-divs-height-to-be-100-of-an-available-area?rq=1">Is it possible to get a div's height to be 100% of an available area?</a> and some same questions but with no luck.
  ALso my live HTML has backgroun-images, so I can't just put footer to the bottom with position:absolute.</p>
  
  <p>There I post my HTML to preview: <a href="http://jsfiddle.net/taran2l/jhztM/" rel="nofollow noreferrer">jsfiddle</a>.</p>
  
  <p><strong>UPD:</strong> scaled live preview:
  <img src="https://i.stack.imgur.com/QJLin.jpg" alt="enter image description here"></p>