CSS positioning challenge

Question

This is a problem I have encountered several times over the years, and I always give up and use JavaScript to do the calculations on the page resize event. Can it be done with pure CSS?

I need to fashion a CSS layout like this:

+---------------------------
 header  -->
+---------------------------
 menu | scrollable content
      | --->
   |  | |
   v  | v
      |
+---------------------------
footer -->
+---------------------------

A fixed-height header should stick to the top and expand horizontally to meet the rightmost edge of the window. A fixed-height footer should stick to the bottom and also expand horizontally to meet the rightmost edge of the window. A fixed-width menu should stick to the left and expand to meet header and footer. A content area should fill the remaining space. The content area may scroll, but never the page itself.

Answer 1

If you don't need to support IE6, yes.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.Header {
    width: 100%;
    height: 100px;
}
.Menu {
    position: absolute;
    left: 0;
    top: 100px;
    bottom: 50px;
    width: 175px;
}
.Footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 100%;
}
.Content {
    position: absolute;
    width: auto;
    height: auto;
    left: 175px;
    top: 100px;
    right: 0;
    bottom: 50px;
    overflow: scroll;
}

I didn't actually test this.