How To Get A Scrollbar In A Div With Fixed Header And Footer?

I have an website and some problems with the scrollbar. What I want I can best explain with this image. But I can't get the scrollbar like this. I have tried some, here is the js

Solution 1:

This can be slowed by using padding and box-sizing = border-box on body ( with body height 100% it will count padding into height, so the box with scroll will be exactly between header and footer)

html {
 overflow: hidden;
 height: 100%;
}

body {
 padding: 60px0px;
 height: 100%;
 box-sizing: border-box;
}

div[role="main"] {
 overflow-y: scroll;
 height: 100%;
}

see http://jsfiddle.net/wPucQ/

EDIT: Added forgotten HTML tag in code

Solution 2:

You need to give the scrollable element a height so the scroll-bar position can be calculated.

div[role="main"]
{
    height:400px;
    overflow-y: scroll;
    margin: 60px0;
}

http://jsfiddle.net/gkxV4/

Solution 3:

Try to mention Min-height or height for this div div[role="main"]{ overflow-y: scroll; margin: 60px 0; min-height:400px;}

Solution 4:

See my fiddle for entire logic fiddlehttp://jsfiddle.net/MA9k3/7

Jquery code:

var doc_height = $(window).innerHeight();

var header_height = $("header").height();
var footer_height = $("footer").height();

var div_height = doc_height - (header_height + footer_height);

$("#content").css({
    "height": (div_height - footer_height) + "px",
    "margin-bottom": footer_height + "px"
});

alert($("#content").height());