title: Fixed Div Overflow is Off Screen
body: <p>I have a sidebar that is fixed with a height of 100%.  This sidebar is below a fixed header so the top is below the header.<br>
  This causes the overflow scrolling to not reach the last element or two:</p>
  
  <p><a href="http://jsfiddle.net/autqts2v/" rel="noreferrer">JSFiddle</a></p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div class="header"&gt;
      &lt;div class="header-inner"&gt;
          &lt;h1 class="header-image"&gt;&lt;a href="/"&gt;&lt;img src="/" id="logo" alt="Header Test"/&gt;&lt;/a&gt;&lt;/h1&gt;
              &lt;nav class="menu"&gt;
              &lt;ul class="nav-lvl-1"&gt;
                  &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://google.com/nav"&gt;Link1 &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="has-sub-menu" href="http://google.com/nav"&gt;Link2&lt;/a&gt;
                      &lt;ul id="test" class="nav-lvl-2"&gt;
                          &lt;li&gt;&lt;a href="http://google.com/sub"&gt;Sublink1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://google.com/sub"&gt;Sublink2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://google.com/sub"&gt;Sublink3&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://google.com/sub"&gt;Sublink4&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://google.com/sub"&gt;Sublink5&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://google.com/sub"&gt;Sublink6&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://google.com/sub"&gt;Sublink7&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://google.com/sub"&gt;Sublink8&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://google.com/sub"&gt;Sublink9&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://google.com/sub"&gt;Sublink10&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://google.com/sub"&gt;Sublink11&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://google.com/sub"&gt;Sublink12&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;   
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://google.com/nav"&gt;Link3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="has-sub-menu" href="http://google.com/nav"&gt;Link4&lt;/a&gt;
                      &lt;ul class="nav-lvl-2"&gt;
                          &lt;li&gt;&lt;a href="http://google.com/nav"&gt;Sublink1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://google.com/nav"&gt;Sublink2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://google.com/nav"&gt;Sublink3&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://google.com/nav"&gt;Sublink4&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://google.com/nav"&gt;Sublink5&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;   
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a class="has-sub-menu" href="http://google.com/nav"&gt;Link6&lt;/a&gt;
                      &lt;ul class="nav-lvl-2"&gt;
                          &lt;li&gt;&lt;a href="http://google.com/nav"&gt;Sublink1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://google.com/nav"&gt;Sublink2&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;   
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: #6ab014;
      z-index: 100001;
      height: 75px;
      overflow: hidden;
      -webkit-transition: height 0.3s;
      -moz-transition: height 0.3s;
      transition: height 0.3s;
  }   
  
  
  /********* Disable link to open sub-menu **********/
  .header .header-image a {
     pointer-events: none;
     cursor: pointer;
  }
  
  
  /* Stop header from overlapping container */
  .container {
      position: relative;
      margin-top: 75px;
      width: 100%;
  }
  
  .main {
      position: block;
      width: 90%;
      max-width: 80em;
      margin: 0 auto;
      padding: 0 1.875em;
  }
  
  
  
  
  
  /********* Side Menu **********/
  .header nav  {
      position: fixed;
      left: 0px;
      top: 75px;
      background: #87cc33;
      width: 330px;
      height: 100%;
      z-index: 1000;
      overflow:auto;
      /* Transitions */
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      transition: all 0.3s ease;
  }
  
  .header nav  ul
  {
      padding: 0;
      margin: 0;
      list-style-type: none;
  }
  
  
  /* Open menu CSS */
  .menu.menu-open {
      left: 0px;
  }
  
  
  /********* Navigation Sub-menus **********/
  .menu .nav-lvl-2.sub-menu-open-mobile{
      /* Max-height may have to change with more sublinks */
      max-height: 1000px;
      display: block;
      opacity: 1;
  }
  
  .menu .nav-lvl-2 {
      background: #a5e25b;
      max-height: 0px;
      display: none;
      opacity: 0;
      /* Transitions */
      -webkit-transition: all .3s ease;
      -moz-transition: all .3s ease;
      transition: all .3s ease;
  }
  
  .menu .nav-lvl-2 a {
      border-bottom: 1px solid #fff;
  }
  
  
  /********* Disable links to open sub-menu **********/
  .has-sub-menu {
     pointer-events: none;
     cursor: pointer;
  }
  
  .menu li:hover {
      cursor: pointer;
  }
  
  
  
  /********* Link CSS **********/
  .menu a{
      display: block;
      color: #fff;
      font-size: 1.1em;
      font-weight: 300;
      border-bottom: 1px solid #a5e25b;
      padding: 1em;
      text-decoration: none;
  }
  
  
  
  /******* Mobile dropdown arrow - down *********/
  a.has-sub-menu:not(.sub-menu-open-mobile):before {
      position: absolute;
      content: "";
      left: 290px;
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 11px solid #fff;
      margin-top: 7px;
  }
  
  /******* Mobile dropdown arrow - up *********/
  a.has-sub-menu.sub-menu-open-mobile:before {
      position: absolute;
      content: "";
      left: 290px;
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 11px solid #fff;
      margin-top: 7px;
  }
  
  
  
  /******* dropdown link css *********/
  a.has-sub-menu:hover:before,
  a.has-sub-menu:focus:before,
  a.has-sub-menu:active:before {
    border-color: transparent #730800;
  }
  
  a.has-sub-menu:hover:after,
  a.has-sub-menu:focus:after,
  a.has-sub-menu:active:after {
    border-color: #730800;
  }
  </code></pre>
  
  <p>Is there a way to solve this using CSS and not JQuery/Javascript?</p>