Full Height Navigation Bar Strange Error
<p>Ok so I made ul height 100% and li a to block level but for some reason I cannot get my vertical navigation to be full height. Well, really I want it to stop right at the footer. So here's the code: I put background-color on the ul but it's not going to the bottom for some reason</p>

<pre><code>html {
    height: 100%;
}  

body{
    height: 100%;
    margin: 0;
    font-family: courier;
    font-size: 19px;
}

* {
    margin: 0;
}

#pagewrap {
    min-height: 100%;
    margin-bottom: -174px; 
}

#pagewrap:after {
    content: "";
    display: block;
}

#footer, #pagewrap:after {
    height: 174px;
}

.sub:last-child {
    border: 0px;
}

#footer {
    background-color:  #00e600;
}

.wrap {
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
}

.sub {
    padding: 12px;
    width: 32%;
    height: 150px;
    background: #00e600;
    color: white;
    border-right: solid white 1px;  
}


.sub:last-child {
    border: 0px;
}

#nav {
    list-style: none;
    font-weight: bold;
    margin-bottom: 10px;
    width: 10%;
    text-align: center;
    background-color: brown;
    padding-right: 20px;  
}

#nav ul {
    list-style-type: none;
    height: 100%;
    margin: 0px;
    padding: 0;
    overflow: auto;
    background-color: brown;
}

#nav li {
    margin: 0px; 
}

#nav li a {
    padding: 10px;
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: pink;
    background-color: brown;  
}

#nav li a:hover {
    color:  white;
    text-shadow: 2px 2px 4px white;
}

&lt;body&gt;  
    &lt;div id="pagewrap"&gt;
        &lt;div id="nav"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Works&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;!--
&lt;footer id="footer"&gt;

&lt;/footer&gt;

--&gt;


&lt;div id="footer"&gt;
    &lt;div class="wrap"&gt;
        &lt;div class="sub"&gt;Lorem Ipsum&lt;/div&gt;
        &lt;div class="sub"&gt;Lorem Ipsum &lt;/div&gt;
        &lt;div class="sub"&gt;Lorem Ipsum &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>Would anybody be able to spot the problem?</p>