title: Auto resize <div> height to remaining space in view port /window
body: <p>I have the follwing HTML code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;BODY&gt;
          &lt;DIV ID="holder"&gt;
              &lt;DIV ID="head_area"&gt;HEAD CONTENT GOES HERE....&lt;/DIV&gt;
              &lt;DIV ID="main_area"&gt;BODY CONTENT GOES HERE&lt;/DIV&gt;
              &lt;DIV ID="foot_area"&gt;FOOT CONTENT GOES HERE...&lt;&gt;
          &lt;/DIV&gt;
      &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>
  
  <p>The CSS applied to this script is as follows:</p>
  
  <pre><code>#holder{
      height:100%;
      padding:0px;
      margin:0px;
      border:0px;
  }
  #head_area{
      height:45px;
  }
  #main_area{
      height:???;            /*Set such that its height adjusts itself to occupy rest pixels of view prt browser pane leftover after placing '#head_area' &amp; '#foot_area' (i.e. height = total height of pane in px - (45px + 20px)*/
      overflow:scroll;
  }
  #foot_area{
      height:20px;
  }
  </code></pre>
  
  <p>What should I do in CSS to set the <code>#main_area</code> height to occupy the remaining space, screen resolution independent , after placing <code>#head_area</code> &amp; <code>#foot_area</code> in position... In other words, The <code>#head_area</code> &amp; <code>#foot_area</code> are always visible in default but on zooming ('ctrl'+'+') it should move out of pane as usual...</p>
  
  <p>Thanks...</p>