How-to mix fixed and percentage heights/width using css without javascript

Question

I want to achieve a layout like this:

 -----------------------------------------------------------
|                                                                 


        

Answer 1

See: http://jsfiddle.net/s7FH6/show/ (edit)

HTML:

CSS:

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden
}
#header {
    background: #ccc;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 150px
}
#content {
    background: #eee;
    position: absolute;
    left: 0;
    top: 150px;
    bottom: 0;
    width: 100%;
    overflow-y: scroll
}