scrollbar not working properly in div with fixed header and footer - html

Question

I am building a website and I am facing some problems with the scrollbar for divs. I have a fixed header and footer and the divs in between must stay between the header and footer. In case of overflow a scroll will appear.
What I am Trying is similar to How to get a scrollbar in a div with fixed header and footer?
But I cant make it work correctly.
JS Fiddle of What I Am Trying
Fiddle
I could make it work by giving body{height: 84%;} but it will different in different browsers.

Answer 1

EDIT:
Now that jsfiddle is back...
Here is an updated fiddle for what you wanted
the following is the main change that was necessary:
div[role="main"]
{
height: 100%;
background: pink;
margin: -70px 0 -30px;
padding: 70px 0 30px;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #4CD3BF;
}
Do something like this:
Not much content: CODEPEN1
Lots of content: CODEPEN2
Markup
<div class="container">
<header></header>
<div class="content"></div>
<footer></footer>
</div>
CSS
/* Assuming header and footer height of 64px */
.container
{
height: 100%;
background: pink;
margin: -64px 0;
padding: 64px 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.content {
overflow:auto;
height:100%;
}
header
{
height: 64px;
background: purple;
position: relative;
z-index:1;
}
footer
{
height: 64px;
background: gray;
position: relative;
z-index:1;
}

Answer 2

there are more than 1 answers to this problem. the easiest way to do this is to wrap the main content (so no header and footer) in a absolute positioned div. set the divs to to the bottom of the header and the bottom to the top of the footer eg
fiddle: http://jsbin.com/onipiq/2/edit
css :
body{
margin: 0;
padding: 0;
}
header{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100px;
background: #eee;
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
background: #eee;
}
.contentContainer{
position: absolute;
width: 100%;
top: 100px;
bottom: 100px;
overflow-y: scroll;
}
.content{
position: relative;
width: 960px;
margin: 0 auto;
}
Note that this example will not scroll on most touch devices but will work fine on desktop.