Fixed width absolute sidebar with fluid content - html

Question

I'm trying to create a fluid layout site which also has a left sidebar with the following properties:
It doesn't scroll when the main content does
It takes up the full height of the page
The only layout I have seen is this one: http://stugreenham.com/demos/fluid-width-with-a-fixed-sidebar/
HTML
<div id="page">
<header id="sidebar">
//SIDEBAR CONTENT HERE
</header>
<article id="contentWrapper">
<section id="content">
//CONTENT HERE
</section>
</article>
</div>
CSS
html {
overflow: hidden;
}
#sidebar {
background: #eee;
float: left;
left: 300px;
margin-left: -300px;
position: relative;
width: 300px;
overflow-y: auto;
}
#contentWrapper {
float: left;
width: 100%;
}
#content {
background: #ccc;
margin-left: 300px;
overflow-y: auto;
}
However I think this is a poor solution because not only does it require negative margins but it also requires javascript.
Is there a better way to achieve this?

Answer 1

Demo
css
#sidebar {
position:fixed;
height:100%;
width: 300px;
background-color: #ccc;
overflow-y: auto;
}
#contentWrapper { /* not using margin */
box-sizing:border-box;
background-color:#eee;
position:absolute;
left:300px;
width:calc(100% - 300px);
min-height: 100%;
}
#contentWrapper { /* using margin */
box-sizing:border-box;
background-color:#eee;
margin-left: 300px;
/*position:absolute;
left:300px;
width:calc(100% - 300px);*/
min-height: 100%;
}
html,body,#page {
width: 100%;
height: 100%;
}

Answer 2

You can do something like this: http://jsfiddle.net/9U2U4/
Demo with lot of Text: http://jsfiddle.net/9U2U4/1/
CSS:
html, body {
height: 100%;
}
body {
margin:0;
padding:0;
}
#page {
height: 100%;
}
#sidebar {
position: fixed;
left:0;
top:0;
bottom:0;
width: 30%;
background-color: #eee;
}
#contentWrapper {
margin-left: 30%;
min-height: 100%;
position: relative;
background: #ccc;
}
#content
{
padding: 10px;
}
HTML:
<div id="page">
<header id="sidebar">// Sidebar</header>
<article id="contentWrapper">
<section id="content">
<p>Text</p>
</section>
</article>
</div>