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

I recommend to you the Flexible Box Layout Module, which has good support in your case (IE10+). Many classic problems with CSS can be easily solved with it, take a look at the Solved by Flexbox list.

A simple approach to face your problem would be to following HTML:

    
Header
    
Page contents
    
Footer

With a simple CSS:

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
}

.container main {
    flex-grow: 1;
    flex-shrink: 0;
}

Pay attention that the spec has changed three times since 2009, so there are little differences in sintax and needs of vender prefixes. The links that I showed talk about it too. Of course, it doesn't matter if you choose to use autoprefixer.