Sidebar to fill height of entire page - html

Question

This is perhaps a common question, but all the answers I have found around the web, didn't work properly.
I want to create a sidebar for my webpage, which fills the entire height of the webpage.
Then when you scroll the sidebars content should move along the rest of the sites content.
I tried this methods:
HTML:
<div id="wrapper">
<div id="sidebar"></div>
<div id="content-area"></div>
</div>
CSS:
body {
margin: 0;
}
#wrapper {
width: 100%;
}
#sidebar {
width: 280px;
position: absolute;
top: 0;
bottom: 0;
}
#content-area {
width: 900px;
margin-left: 280px;
}
..and:
HTML:
<div id="wrapper">
<div id="sidebar"></div>
<div id="content-area"></div>
</div>
CSS:
body {
height: auto;
min-height: 100%;
margin: 0;
}
#wrapper {
width: 100%;
height: 100%;
}
#sidebar {
width: 280px;
height: 100%;
float: left;
}
#content-area {
width: 900px;
height: 100%;
float: left;
}
The first one works fine, until the content is extended: http://jsfiddle.net/B3bCb/1/
If that happens then the sidebar stops according to the browser-window height.
The second one didn't worked at all: http://jsfiddle.net/B3bCb/2/
I have also tried the faux column method, but I need to have an CSS-shadow (which blur, spread and color, can be changed dynamically on the site) on my sidebar, which I cannot do properly in the faux column method (Faux column is just an image).
So how do I make my sidebar 100% in height, no matter how much content I have?

Answer 1

Making the sidebar position as "fixed" it stays, doesn't matter how much content you have. I don't know if I solve your problem but hope it helps ;)
Here's the code:
#sidebar {
width: 280px;
position: fixed;
top: 0;
bottom: 0;
background: blue; }
Here's the fiddle

Answer 2

The following css can be another alternative for this
#sidebar {
width: 280px;
position: fixed;
top: 0;
height:100%;
background: blue;
}
#content-area {
position:relative;
left: 280px; // width of your side box.
}

Answer 3

You have a couple of choices, but the gist is to do with CSS position.
The reason position: absolute; does not work is because it needs some tweaking for that to work. You need to disable scrolling on the html, body, and wrapper classes, and enable scrolling on the content-area.
html, body, wrapper {
overflow: hidden;
}
.content-area {
overflow: auto;
}
You can see an example of this here. It's a responsive sidebar layout I made.
The other option is to use a position: fixed; on the sidebar, as others have noted.

Answer 4

Check this fiddle http://jsfiddle.net/dJ654/2/
I have changed some styles
#sidebar {
width: 10%;
height: 100%;
position:fixed;
right:0px;
top:0px;
background-color:gray;
}
#content-area {
width: 90%;
height: 100%;
float: left;
background-color:green;
}