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

This is a simple setup with what I think you want to accomplish. IE10 support is possible only you have to prefix / use old syntax for the flex property.

We have a wrapper element to which we say: you are now a flex element and your child elements can be flex(ible) elements with display: flex;

For the direction we use column, default is 'row' but we want them under each other.

Finally we define heights to the header and footer and so to the main element: you have the flex property '1'. Which will fill up the space that is left over between the elements.

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}
.wrapper {
  display: flex;
  height: 100%;
  flex-direction: column;
  -ms-flex-direction: column;
  background: red;
}

header {
  height: 100px;
  background: blue;
}

main {
  flex: 1;
  background: orange;
}

footer {
  height: 20px;
  background: yellow;
}

  

    Header element
  

  

    
 Main
  

  

    Footer