title: Body overflow-y hidden and scroll inner div only
body: <p>I have this HTML structure:</p>
  <pre><code>&lt;div id=&quot;main_wrapper&quot;&gt;
  &lt;header&gt;Header&lt;/header&gt;
  &lt;div id=&quot;inner_wrapper&quot;&gt;
      &lt;div id=&quot;left_menu&quot;&gt;Left menu&lt;/div&gt;
      &lt;div id=&quot;content_wrapper&quot;&gt;
          &lt;div id=&quot;inner_content&quot;&gt;
              &lt;!-- CONTENT HERE --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS:</p>
  <pre><code>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;               
  }
  </code></pre>
  <p>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.</p>
  <p>Here is a jsFiddle -&gt; <a href="http://jsfiddle.net/qJ4qc/" rel="nofollow noreferrer">http://jsfiddle.net/qJ4qc/</a></p>
  <h1>EDIT</h1>
  <p>I managed to do this with jQuery like so: <a href="http://jsfiddle.net/qJ4qc/2/" rel="nofollow noreferrer">http://jsfiddle.net/qJ4qc/2/</a></p>
  <p>Is there a way to accieve this only with css??</p>