title: CSS: Taking the all available height inside parent without overflowing it
body: <pre><code>&lt;div id="wr"&gt;
      &lt;div id="con_top"&gt;&lt;/div&gt;
      &lt;div id="con_bottom"&gt;&lt;/div&gt;
  &lt;/div&gt;​
  
  #wr {
      height:400px;
      width:80%;
      margin:50px auto;
      border:1px solid black;
  }
      #con_top {
          height:40px;
          margin:5px;
          border:1px solid red;            
      }
      #con_bottom {
          height:100%;
          border:1px solid blue;
          margin:5px;    
      }​
  </code></pre>
  
  <p><a href="http://jsfiddle.net/nMbWw/" rel="nofollow">http://jsfiddle.net/nMbWw/</a></p>
  
  <p>How to make blue square, fit the black, parent container? Is it possible without javascript?</p>
  
  <p>With table elements it's much easier, but table is bugged in Opera and IE. td element on height 100% doesn't work as intended, taking the height of table element itself ignoring the height of all others td in that table.</p>
  
  <p>For example, open with Opera or IE:</p>
  
  <p><a href="http://jsfiddle.net/UTMRn/3/" rel="nofollow">http://jsfiddle.net/UTMRn/3/</a></p>