Fixed Div Overflow is Off Screen - html

Question

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.
This causes the overflow scrolling to not reach the last element or two:
JSFiddle
Here is the HTML:
<div class="header">
<div class="header-inner">
<h1 class="header-image"><img src="/" id="logo" alt="Header Test"/></h1>
<nav class="menu">
<ul class="nav-lvl-1">
<li>Home</li>
<li>Link1 </li>
<li><a class="has-sub-menu" href="http://google.com/nav">Link2</a>
<ul id="test" class="nav-lvl-2">
<li>Sublink1</li>
<li>Sublink2</li>
<li>Sublink3</li>
<li>Sublink4</li>
<li>Sublink5</li>
<li>Sublink6</li>
<li>Sublink7</li>
<li>Sublink8</li>
<li>Sublink9</li>
<li>Sublink10</li>
<li>Sublink11</li>
<li>Sublink12</li>
</ul>
</li>
<li>Link3</li>
<li><a class="has-sub-menu" href="http://google.com/nav">Link4</a>
<ul class="nav-lvl-2">
<li>Sublink1</li>
<li>Sublink2</li>
<li>Sublink3</li>
<li>Sublink4</li>
<li>Sublink5</li>
</ul>
</li>
<li><a class="has-sub-menu" href="http://google.com/nav">Link6</a>
<ul class="nav-lvl-2">
<li>Sublink1</li>
<li>Sublink2</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 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;
}
Is there a way to solve this using CSS and not JQuery/Javascript?

Answer 1

How about using bottom: 0 instead of using height: 100%. Using height: 100% plus a top value will push it off the 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: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
Alternately, you could use height with calc.
height: calc(100% - 75px);
But the browser support is not as good with this option.