Sidebar height 100% on div not extending to bottom of page

Question

I've seen several similar questions/answers to this problem on SO but none of the answers that I've checked have helped me.

I'm attempting to have a "Side-Bar" extend from 10px less than the top of the page, all the way to the bottom.

However (when using height:100%), the "Side-Bar" only reaches to the bottom of the loaded browser window, if there is content past the browser window that you scroll down to, the "Side-Bar" ends prematurely.

Basically, its height is only 100% of the browser window, I desire it to be 100% of the full page content.

I've created a JSFiddle that shows my problem:

http://jsfiddle.net/qaEzz/1/

My CSS:

#sidebar {
  position:absolute;
  right:8px;
  width:200px;
  height:100%;
  overflow:hidden;
  background-color: yellow;
}

Answer 1

i put the <div id="sidebar"></div>

into the <div id="content">

and added in the css

#topbar {
    width:100%; <--this 
    height:20px;
    background-color: red;
}

and this

#sidebar {
    position:absolute;
    right:16px; <--! extended to 16 px
    width:200px;
    height:100%;
    overflow:hidden;
    margin-top:-10px; <--!
    background-color: yellow;
}


#content {
    position: absolute;<--! and remove the marging: 10px just add a <br> in the html
    width:100%
}

Here is the working Fiddle

Answer 2

If you change position:absolute; to position:fixed; , then it would stick to its position on the right.

For a sidebar that might have a longer length than the browser length itself, instead of the position attribute, use the float attribute.

http://jsfiddle.net/wK2Yh/

#sidebar {
    float:right;
    right:8px;
    width:200px;
    height:100%;
    overflow:hidden;
    background-color: yellow;
}