Why is my header-bar overlapping scrollbar

css, html, overlapping, scrollbar

Solution

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;
}

Problem

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.

Original source