title: How to fill 100% of remaining height?
body: <pre><code>+--------------------+
  |                    |
  |                    |
  |                    |
  |                    |
  |         1          |
  |                    |
  |                    |
  |                    |
  |                    |
  +--------------------+
  |                    |
  |                    |
  |                    |
  |                    |
  |         2          |
  |                    |
  |                    |
  |                    |
  |                    |
  +--------------------+
  </code></pre>
  
  <p>Contents of (1) as shown above are unknown, as it may increase or decrease in dynamically generated pages. The second div (2) as shown above, should fill the remaining space.</p>
  
  <p>here is an example of my html</p>
  
  <pre><code>&lt;div id="full"&gt;
  &lt;!--contents of 1 --&gt;
  &lt;div id="someid"&gt;
  &lt;!--contents of 2 --&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css...</p>
  
  <pre><code>#full{width: 300px; background-color: red;}
  #someid{height: 100%;}
  </code></pre>
  
  <p>Or is this method wrong? How should I do this?
  please see my <strong><a href="http://jsfiddle.net/Y7PhV/99/" rel="noreferrer">demo</a></strong> and show me my mistake.</p>