Why is my header-bar overlapping scrollbar

Question

I've tried looking at already existing questions but none of the solutions in them worked for me. Basically, my header-bar(which is supposed to be across the entire screen) is overlapping the scrollbar - and I can't seem to get it UNDER the scrollbar, which is what I want.

http://jsfiddle.net/9cnXN/2/

http://jsfiddle.net/9cnXN/2/embedded/result/

This is using Rockmelt as browser. I can also confirm problem on FireFox latest version as well as Chrome.

Answer 1

You can adjust the margins of the scrollable area to be exactly the height of the header and footer bar - DEMO

.page {
    position: absolute;
    left: 0;
    right: 0;
    overflow: auto;
    margin: 44px 0;
}