How to get a scrollbar in a div with fixed header and footer?

Question

I have an website and some problems with the scrollbar.

What I want I can best explain with this image.

Answer 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: 60px 0px;
 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