html - CSS - Height of 100% minus #px - Header and Footer

Question

The webpage in question looks like this:

// The Header //
/*            */
/*  CONTENT   */
/*            */
// The footer //

Both the header and the footer have fixed heights. Lets say for example that both have a height of 20px. I need to set the content's height to 100% minus 40px (header + footer heights). I know I can do this easily with JavaScript, but it would be cool to learn how to do it with plain CSS, if it's possible.

Answer 1

If your browser supports CSS3, try using the CSS element Calc()

height: calc(100% - 65px);

you might also want to adding browser compatibility options:

height: -o-calc(100% - 65px); /* opera */
height: -webkit-calc(100% - 65px); /* google, safari */
height: -moz-calc(100% - 65px); /* firefox */