How can an html element fill out 100% of the remaining screen height, using css only?

Question

I have a header element and a content element:

#header
#content

I want the header to be of fixed height and the content to fill up all the

Answer 1

Actually the best approach is this:

html { 
    height:100%;
}
body { 
    min-height:100%;
}

This solves everything for me and it helps me to control my footer and it can have the fixed footer no matter if page is being scrolled down.

Technical Solution - EDITED

Historically, 'height' is tricky thing to mold with, compared to 'width', the easiest. Since css focus on for styling to work. The code above - we gave and a height. This is where magic comes into picture - since we have 'min-height' on playing table, we are telling browser that is superior over because holds the min-height. This in turn, allows to override because had height already earlier. In other words, we are tricking browser to "bump" off the table, so we could style independently.