title: How to position a DIV to fill all available space between a header DIV and a footer DIV?
body: <p>Let's say I have a parent DIV. Inside, there are three child DIVs: header, content and footer. Header is attached to the top of the parent and fills it horizontally. Footer is attached to the bottom of the parent and fills it horizontally too. Content is supposed to fill all the space between header and footer.</p>
  
  <p>The parent has to have a fixed width and height. The content DIV has to fill all available space between header and footer. When the content size of the content DIV exceeds the space between header and footer, <strong><em>the content DIV should display scrollbars and allow appropriate scrolling</em></strong> so that the footer contents should never be obscured nor the footer obscure content.</p>
  
  <p>Now comes the hard part: <strong><em>you don't know the height of the header nor footer beforehand</em></strong> (eg. header and footer are filled dynamically). How can content be positioned <strong><em>without using JavaScript</em></strong>?</p>
  
  <p>Example:</p>
  
  <pre><code>&lt;div style="position : relative; width : 200px; height : 200px; background-color : #e0e0ff; overflow : hidden;"&gt;
      &lt;div style="background-color: #80ff80; position : absolute; left : 0; right : 0; top : 0;"&gt;
      header 
      &lt;/div&gt;
      &lt;div style="background-color: #8080ff; overflow : auto; position : absolute;"&gt;
      content (how to position it?)
      &lt;/div&gt;
      &lt;div style="background-color: #ff8080; position : absolute; bottom : 0px; left :0; right : 0;"&gt;
      footer 
      &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>To clarify this event further</strong> - the target layout that I'm trying to achieve will be used in a business web application. <strong><em>The parent DIV will have a fixed, but unknown size</em></strong> (for instance, it will be exactly the size of the browser viewport, sizing itself along with sizing the browser window by the user). Let's call the parent DIV a "screen".</p>
  
  <p>The header will contain a set of filtering controls (like textboxes, drop down lists and a "filter" button) that should wrap to the next line if there is insufficient horizontal space (so its height can change any time to accomodate line breaking). <strong><em>The header should always be visible and attached to the top</em></strong> of the "screen".</p>
  
  <p>The footer will contain a set of buttons, like on a dialog window. These too can wrap to next line if there is not enough space horizontally. <strong><em>The footer must be attached to the bottom</em></strong> of the "screen" to be accessible and visible at all times.</p>
  
  <p>The content will contain "screen" contents, like dialog fields etc. If there are too few fields, the rest of the content will be "blank" (in this case the footer should not begin right after the content, but still be attached to the bottom of the "screen" which is fixed size). If there are too many fields, <strong><em>the content DIV will provide scrollbar(s)</em></strong> to access the hidden controls (in this case the content DIV must not extend itself below the footer, as the scrollbar would be partially hidden). </p>
  
  <p>I hope this clarifies the question a little bit further, as I have too low rep to enter comments to your repsonses.</p>