Body overflow-y hidden and scroll inner div only

Question

I have this HTML structure:

<div id="main_wrapper">
<header>Header</header>
<div id="inner_wrapper">
    <div id="left_menu">Left menu</div>
    <div id="content_wrapper">
        <div id="inner_content">
            <!-- CONTENT HERE -->
        </div>
    </div>
</div>

and the CSS:

body {
overflow-y: hidden;
}

#main_wrapper {
width: 100%;
float: left;
}

header {
width: 100%;
float: left;
background: #0072C6;
color: #fff;
padding: 10px 0;
border-bottom: 7px solid #004477;
}

#inner_wrapper {
width: 100%;
float: left;
}

#left_menu {
width: 220px;
float: left;
}

#content_wrapper {
margin-left: 220px;
overflow-y: scroll;
}

#inner_content {
width: 100%;
float: left;
background: #999;               
}

When the content inside #inner_content div is overflowed, I want to scroll the content only, and let the reamining page in its position. I know I can do it if I apply position fixed, but I wonder if it can be done with this positioning.

Here is a jsFiddle -> http://jsfiddle.net/qJ4qc/

EDIT

I managed to do this with jQuery like so: http://jsfiddle.net/qJ4qc/2/

Is there a way to accieve this only with css??

Solution

I found a solution setting

html, body {
  height: 100%;
}

Take a look at it here