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 use absolute positioning to achieve this.

Try the following

CSS

.content {
    position:absolute;
    top:100px; /* make this equal to the height of your header tag */
    bottom:100px; /* make this equal to the height of your footer tag */
    left:0;
    right:0;
}
header {
    height:100px;
    background:green;
}
footer {
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background:red;
}

1. Give your header a fixed height.

2. Give your footer a fixed height and position:absolute with a bottom:0, left:0; and a right:0;.

3. Make your content div position:absolute and give it a left:0; and a right:0;. Make the top position equal to the height of your header and the bottom position equal to the height of your footer.

http://jsfiddle.net/z4h64juf/1/

Hope that helps.