Browsers Scrollbar Is Under My Fixed Div

Browsers scrollbar is under my fixed div

its because the overflow-x: hidden; in base.css line number 9

body {
    color: #444444;
    font: 13px/20px Arial,Helvetica,sans-serif;
    overflow-x: hidden; // remove this 
}

CSS fixed element appear over scrollbars

Demo in this fiddle

An alternative approach here would be to only scroll the #content-wrapper from your example. Here's a basic example of how this might be done:

HTML

<div id="container">
    <div id="nav">
        Navbar
    </div>

    <div id="content-wrapper">
        <div id="content">
            <div>
                Begin
            </div>
            <div style="height: 600px;">
                ...
            </div>
            <div>
                End
            </div>
        </div>
    </div>

    <div id="footer">
        Footer
    </div>
</div>

CSS

body {
    margin:0;
    padding:0;
    height: 100%;
    width: 100%;
}

#container {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#nav {
    background-color:rgb(50,50,50);
    color: white;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 30px;
    padding-top: 10px;
}

#content-wrapper {
    position:absolute;
    top:40px;
    bottom:40px;
    left:0;
    right:0;
    background-color:rgb(200,200,200);
    width: 100%;
    overflow:scroll;

}

#footer {
    background-color: rgb(220, 220, 240);
    position: fixed; 
    left: 0;
    bottom: 0;
    height: 30px;
    width: 100%;
    padding-top: 10px;
}

Fixed div over my window scrollbar

Look at this:
jsfiddle

#scrollable
{
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0;
    z-index: 2; 
    margin:0;
    padding:0;
}

div.bottom
{
    background-color: #fa0000;
    position:  fixed;
    bottom: 0%;

    /*height: 10%;*/
    height: 80px;
    width: 100%;
    margin:0;
    padding:0;
    z-index:9999;
}

div.test
{
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    position: absolute;
    top : 10px;
    background: #000000;
    height: 1500px;
    width: 100%;
    margin-bottom: 80px;
    margin:0;
    padding:0;
}

Scroll fixed div content with browser scrollbar

The fixed property makes both divs scroll up and down with the user already. With your current setup you can't see that because there is no scrolling up or down on your page.

What you probably want to do is make only the first div fixed and leave the other at static (the standard value). If the second div is high enough, the browser will add a scrollbar, allowing you to scroll up/down over the second div while the first div remains in place.

Take a look at this snippet (be sure to click "Full page" in the top-right corner):

body {    margin:0;}
#first {    position:fixed;    top:0;    width:100%;    height:100px;    background-color:red;}#second {    margin-top:100px;    width:100%;    height:1500px;    background-color:blue;}

<body>    <div id="first">        First div    </div>
    <div id="second">        Some text more text even more text.<br />        A new line here. More text.<br />        Text text text text text text.<br />        Text text text text text text.<br />        Text text text text text text.<br />        Text text text text text text.<br />        Text text text text text text.<br />        Text text text text text text.<br />        Et cetera.<br />    </div></body>

Browsers Scrollbar Is Under My Fixed Div