How to make a div responsive height between header and footer with CSS only?

Question

I have an HTML page with fixed height header and footer and a element in between.

I want the element to have always the total height of the screen (excluding the h

Answer 1

you can do this with css calc:

html,body{ height:100%; }
.content{
    height: calc(100% - 120px);
}

Of course, you have to change 120px for whatever is the sum of the footer and the header height. And don't forget about the vendor prefixes.

More info: https://developer.mozilla.org/es/docs/Web/CSS/calc

An advice: don't forget to use the units inside the () and don't forget to use spaces around the - + * signs or it won't work.