I'm trying to do a seemingly simple webpage layout, but I'm hitting a wall.

I'd like to do everything purely with CSS (no tables to much things up, and no javascript dynamically resizing things)

I'd like to have:

• A heading with a fixed height
• A footer with a fixed height
• Left sidebar with a fixed width
• Right sidebar with a fixed width
• The whole layout always fills the entire viewport (i.e. if the user resizes the window, the layout grows to the new size)

Put another way:

|<                Total width is 100% of viewport             >|

+--------------------------------------------------------------+  ---
|                 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
+--------------------------------------------------------------+  ---

The parts that are giving me the most trouble are

• Having the sidebars and center have a height equal to the height of the viewport minus the heights of the header and footer
• Having the center have a width equal to the width of the viewport minus the widths of the two sidebars

I have no problem requiring users to have a modern browser.

I'm aware that similar questions to this have been asked before, such as

• Make a div fill remaining space (http://stackoverflow.com/questions/1717564)
• Three row tableless CSS layout with middle row that fills remaining space (http://stackoverflow.com/questions/1703455)
• Create 2 divs, one takes up remaining space (http://stackoverflow.com/questions/1717564)

... 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.