title: How can you set a DIV to use 100% of the remaining space in its parent container?
body: <p>The trouble I'm having is I have the following structured code. Essentially I would like the UL to take up the top 37 pixels of the page, and the div that follows it to take up the <em>remaining</em> area of the browser's window. </p>
  
  <p>So if I resize the window, and make it taller, the purple background of the div should fill the entire bottom area. The problem I'm having is that if I set height to 100% on the purple DIV, it creates a scroll bar because its creating the DIV to 100% of the size of the parent, not 100% of the <em>remaining</em> area after the UL has been accounted for.</p>
  
  <pre><code>&lt;body style="padding:0; margin:0;border-width:1px;border-color:Gray; border-style:dashed; position:absolute; left:0px; right:0px; top:0px; bottom:0px;"&gt;
  &lt;div style="margin:0; padding:0; left:0px; right:0px; top:0px; bottom:0px;margin:0;height: 100%;border-width:1px;border-color:Green; border-style:dashed;"&gt;
      &lt;div style="margin:0; padding:0; height:100%;border-width:1px;border-color:Red; border-style:dashed;"&gt;
          &lt;ul style="padding:0;margin:0;border-width:1px;border-color:Blue; border-style:solid; left:0px; right:0px; top:0px; bottom:0px;"&gt;
              &lt;li &gt;Test Item&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;div style="height:100%;background-color:Purple;"&gt;Test Content&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>EDIT: I should note that I'm doing my testing in the latest version of Chrome, but I see the same behavior in IE9 and the latest version of Firefox.</p>