title: CSS layout that fills available space
body: <p>I'm trying to do a seemingly simple webpage layout, but I'm hitting a wall.  </p>
  
  <p>I'd <em>like</em> to do everything <strong>purely with CSS</strong> (<strong>no tables</strong> to muck things up, and <strong>no javascript</strong> dynamically resizing things)</p>
  
  <p>I'd like to have:</p>
  
  <ul>
  <li>A heading with a fixed height</li>
  <li>A footer with a fixed height</li>
  <li>Left sidebar with a fixed width </li>
  <li>Right sidebar with a fixed width</li>
  <li>The whole layout always fills the entire viewport (i.e. if the user resizes the window, the layout grows to the new size)</li>
  </ul>
  
  <p>Put another way:</p>
  
  <pre>
  
  |&lt;                Total width is 100% of viewport             &gt;|
  
  +--------------------------------------------------------------+  ---
  |                 Header with a fixed height                   |   ^
  |--------+-------------------------------------------+---------+    
  |        |                                           |         |    
  |        |                                           |         |    
  |  Left  |                                           |  Right  | Total
  |  with  |        Center grows in height/width       |  with   | height
  |  fixed |      and has scrollbars if necessary      |  fixed  | is
  |  width |                                           |  width  | 100%
  |        |                                           |         | of
  |        |                                           |         | viewport
  |        |                                           |         |  
  |--------+-------------------------------------------+---------|   
  |                 Footer with a fixed height                   |   v
  +--------------------------------------------------------------+  ---
  
  </pre>
  
  <p>The parts that are giving me the most trouble are</p>
  
  <ul>
  <li>Having the sidebars and center have a height equal to the height of the viewport minus the heights of the header and footer</li>
  <li>Having the center have a width equal to the width of the viewport minus the widths of the two sidebars</li>
  </ul>
  
  <p><strong>I have no problem requiring users to have a modern browser.</strong></p>
  
  <p>I'm aware that similar questions to this have been asked before, such as </p>
  
  <ul>
  <li>Make a div fill remaining space (<code>http://stackoverflow.com/questions/1717564</code>)</li>
  <li>Three row tableless CSS layout with middle row that fills remaining space (<code>http://stackoverflow.com/questions/1703455</code>)</li>
  <li>Create 2 divs, one takes up remaining space (<code>http://stackoverflow.com/questions/1717564</code>)</li>
  </ul>
  
  <p>... and the conclusion seems to be that there isn't a good solution.  Those answers are somewhat old, so I'm hoping that someone knows the trick now.</p>
  
  <hr>
  
  <p>Yes, I'm aware that this appears to be trivial to accomplish using a <code>&lt;table&gt;</code>, and after "banging my head against the wall" I did actually attempt to achieve the layout using a table.  Unfortunately, with this approach, I have been unable to get the center section to show scroll bars (using <code>overflow: auto</code>) when the content grows too large.)</p>