title: Html height split to two parts one is changing height and one is Long and scrollable
body: <p>I am trying to divide a page or a section of the page into two parts (height).
  top part will be as much as it's contents height.
  bottom part will be the rest of the available height (scrollable if needed).</p>
  
  <p>i made it, and its working, but IE(9) and firefox are showing it badly :(</p>
  
  <p>Maybe i got the wrong idea to start with, maybe no need for table.. </p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Some Content
          &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td style="height:100%"&gt;
              &lt;div style="overflow: auto;height: 100%;"&gt;
                  more long content (scrollable)
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/CxTBpvVO93OtQE7kIAra?p=preview" rel="nofollow">Plunkr working demo</a></p>
  
  <p>please help.</p>
  
  <p>--EDIT:</p>
  
  <p>i know there is an easy javascript solution to this problem but I am looking for a pure css html solution.</p>