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

Fix both header and footer using position:fixed; and for content use

padding: 60px 0;
height: 100%;
box-sizing: border-box;

http://codepen.io/anon/pen/xGRyNW

Answer 2

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

Answer 3

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;
}

<div class="wrapper">
  <header>
    Header element
  </header>

  <main>
    <h1> Main</h1>
  </main>

  <footer>
    Footer  
  </footer>
</div>