html - Sticky header and footer scrollable content

Question

I'm trying to create a page which contains three divs: a header, a footer, and a content area. These should take up 100% of the screen.

The header and footer are small and won't change, the content area could be any size, so I have added overflow:auto to make it scroll when it gets too large.

The problem is, it overflows the height of the screen. I have created a fiddle to demonstrate: https://jsfiddle.net/tdxn1e7p/

I'm using the following CSS to set up the html and body height, so the height:100% trick on the container will work:

html, 
body {
    height: 100%;
}

The structure of my document is:

<div style="height:100%;">
  <div>
    Header content
  </div>
  <div style="overflow:auto;">
    Body content... this could be very long
  </div>
  <div>
    Footer content
  </div>
</div>

I have found a lot of variations on this sort of problem such as this question, but haven't been able to make any of the answers work for me.

Answer 1

Approach 1 - flexbox

It works great for both known and unknown height elements. Make sure to set the outer div to height: 100%; and reset the default margin on body. See the browser support tables.

jsFiddle

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header, .footer {
  background: silver;
}
.content {
  flex: 1;
  overflow: auto;
  background: pink;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>