Placing a Fixed Element Above Browser's Scrollbar

Placing a fixed element above browser's scrollbar

No, html elements cannot render over the browser chrome (scroll bars, etc).

For more information on how pages are rendered, read this article Web Browser Engine

Also with Z-index, the lower numbers are behind objects with higher numbers. More or less, for more detail see the CSS spec

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

How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?

You probably can't. Here's something that comes close. You won't get content to flow around it if there's space below.

http://jsfiddle.net/ThnLk/1289

.stuck {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 180px;
    overflow-y: scroll;
}

You can do a percentage height as well:

http://jsfiddle.net/ThnLk/1287/

.stuck {
    max-height: 100%;
}

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>

Fixed elements are out of browser's screen

Fixed positioning means that the element is on a fixed position on the screen, no matter if you scroll or not.

In other words, the scrollbars (if any) won't have an effect on the fixed element.

So even if a browser would put scrollbars on the window if the fixed element came out larger, using those scrollbars would not scroll the fixed element into view!

So, no scrollbars. They would be useless.

One solution is to use position: absolute instead of position: fixed. Absolutely positioned elements do scroll with the page, so the scrollbars do work.

<div style="position: absolute; margin-left: 50px; margin-top: 50px; width: 300px; height: 300px; background-color: blue;">

</div>

Have a fixed position div that needs to scroll if content overflows

The problem with using height:100% is that it will be 100% of the page instead of 100% of the window (as you would probably expect it to be). This will cause the problem that you're seeing, because the non-fixed content is long enough to include the fixed content with 100% height without requiring a scroll bar. The browser doesn't know/care that you can't actually scroll that bar down to see it

You can use fixed to accomplish what you're trying to do.

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

This fork of your fiddle shows my fix:
http://jsfiddle.net/strider820/84AsW/1/

Placing a Fixed Element Above Browser's Scrollbar