Sticky header and footer scrollable middle content

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 and not scroll. 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 main content 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.