Fixed Div Overflow is Off Screen

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"><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 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.