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

Try this,

HTML

CSS

html,body{
    height: 100%;
    background: black;
    margin:0;
    padding:0;
}
*{
   box-sizing: border-box;
}
.pagewidth{   
    position: relative;
    height: 100%;
    min-height:100%;
}
header{
    background: green;
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height: 30px;
    z-index:2;
}
.wrapper{
    background: black;
    position: absolute;
    left:0;
    top:0;
    z-index:1;
    width:100%;
    height:100%;
    padding: 30px 0;
}
footer{
    background: blue;
    position: absolute;
    left:0;
    bottom:0;
    width:100%;
    height: 30px;
    z-index:2;
}

https://jsfiddle.net/rtwLe6zu/