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

Using fixed values for header and footer is simple. Lets say you have a value of 60px to both header and footer and position them sticky (fixed) top and bottom, you have the following code:

.header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 60px;
}
.footer {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    height: 60px;
}
.content {
    position: absolute;
    top: 60px;
    bottom: 60px;
    left: 0;
    bottom: 0;
    /*Now, if you need your content to overflow properly when higher than the space provided by the screen you may add:
    overflow-y: scroll;
    and a scrollbar will show up
    */
}

If you need the header and footer as %, then you need to set the height of html and body to 100% and set the top and bottom for .content according to the respective % values. You may consider adding html and body in the first part of your css code, just to follow the cascading rule of your elements in the page. And body should be margin: 0;

Working with absolute and fixed positions and adding left: 0 and right: 0 to all your elements, you skip the width values.

An example with overflow is here: http://codepen.io/desginarti/pen/OVbBoe