html - Fixed Div Overflow is Off Screen -

i have sidebar fixed height of 100%. sidebar below fixed header top below header.
causes overflow scrolling not reach last element or two:

jsfiddle

here html:

<div class="header">     <div class="header-inner">         <h1 class="header-image"><a href="/"><img src="/" id="logo" alt="header test"/></a></h1>             <nav class="menu">             <ul class="nav-lvl-1">                 <li><a href="/">home</a></li>                 <li><a href="http://google.com/nav">link1 </a></li>                 <li><a class="has-sub-menu" href="http://google.com/nav">link2</a>                     <ul id="test" class="nav-lvl-2">                         <li><a href="http://google.com/sub">sublink1</a></li>                         <li><a href="http://google.com/sub">sublink2</a></li>                         <li><a href="http://google.com/sub">sublink3</a></li>                         <li><a href="http://google.com/sub">sublink4</a></li>                         <li><a href="http://google.com/sub">sublink5</a></li>                         <li><a href="http://google.com/sub">sublink6</a></li>                         <li><a href="http://google.com/sub">sublink7</a></li>                         <li><a href="http://google.com/sub">sublink8</a></li>                         <li><a href="http://google.com/sub">sublink9</a></li>                         <li><a href="http://google.com/sub">sublink10</a></li>                         <li><a href="http://google.com/sub">sublink11</a></li>                         <li><a href="http://google.com/sub">sublink12</a></li>                     </ul>                    </li>                 <li><a href="http://google.com/nav">link3</a></li>                 <li><a class="has-sub-menu" href="http://google.com/nav">link4</a>                     <ul class="nav-lvl-2">                         <li><a href="http://google.com/nav">sublink1</a></li>                         <li><a href="http://google.com/nav">sublink2</a></li>                         <li><a href="http://google.com/nav">sublink3</a></li>                         <li><a href="http://google.com/nav">sublink4</a></li>                         <li><a href="http://google.com/nav">sublink5</a></li>                     </ul>                    </li>                 <li><a class="has-sub-menu" href="http://google.com/nav">link6</a>                     <ul class="nav-lvl-2">                         <li><a href="http://google.com/nav">sublink1</a></li>                         <li><a href="http://google.com/nav">sublink2</a></li>                     </ul>                    </li>             </ul>         </nav>     </div> </div> 

and css:

.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 open sub-menu **********/ .header .header-image {    pointer-events: none;    cursor: pointer; }   /* stop header 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: 0.3s ease;     -moz-transition: 0.3s ease;     transition: 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 change 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: .3s ease;     -moz-transition: .3s ease;     transition: .3s ease; }  .menu .nav-lvl-2 {     border-bottom: 1px solid #fff; }   /********* disable links 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 - *********/ 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; } 

is there way solve using css , not jquery/javascript?

how using bottom: 0 instead of using height: 100%. using height: 100% plus top value push off page.

updated .header nav (jsfiddle)

    .header nav  {         position: fixed;         left: 0px;         top: 75px;         background: #87cc33;         width: 330px;         bottom: 0;         z-index: 1000;         overflow:auto;         /* transitions */         -webkit-transition: 0.3s ease;         -moz-transition: 0.3s ease;         transition: 0.3s ease;     } 

alternately, use height calc.

height: calc(100% - 75px); 

but browser support not option.