title: CSS: Make only side menu scrollable
body: <p>EXAMPLE is here <a href="http://jsfiddle.net/zsSrZ/" rel="nofollow noreferrer">http://jsfiddle.net/zsSrZ/</a></p>
  
  <p>The page itself is unscrollable and so is the content in <code>#container</code> but I can't figure out how to make the side navigation scrollable. In the example I have overfilled <code>#menu</code> with li's so it spills off the page but You don't see it because overflow is set to off on the body.</p>
  
  <p>HTML</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="menu"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;/li&gt;
          .
          . 
          .
          .
          .
      &lt;li&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="container"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>#container {
    position:absolute;
    width:100%;
    top:0;
    bottom:0;
    z-index:-1;
    overflow:hidden;
    background:red;
  }
  
  #menu {
    width:200px;
    background:white;
    float:left;
    height:100%;
    margin-top:54px
  }
  </code></pre>