Get fixed div element in sidebar

Question

<nav class="offcanvas-menu">
    <div class="user-details"></div>

    <ul class="test">
        <li>content</li>
    </ul>
    <div class=navfooter>
        footer content
    </div>
</nav>

i dont know how to get the .navfooter on the bottom of the sidebar. it is allways unter the .test container. i tryed couple of things but its not getting work

these are the styles for it

<style>
    .test{
        left: 0;
        top: 20%;
        height: 400px;
        width: 200px;
        background: #ECF0F1;
        -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
        box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    }

    .navfooter {
        position: relative;
        bottom: 0;
        z-index: 999;
        height: 64px;
        width: 100%;
        background: #1e67cb;
        box-shadow: 0 -1px 5px rgba(0,0,0,.6);
        -webkit-box-shadow: 0 -1px 5px rgba(0,0,0,.6);  
    }

.offcanvas-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1031;
    /*visibility: hidden;*/
    background: #fff;
    border-right: 1px solid #CCC;
    width: 250px;
    height: 100%;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
</style>

Answer 1

Have you tried changing the .navfooter to absolute?

.navfooter {
        position: absolute;
        bottom: 0;
        z-index: 999;
        height: 64px;
        width: 100%;
        background: #1e67cb;
        box-shadow: 0 -1px 5px rgba(0,0,0,.6);
        -webkit-box-shadow: 0 -1px 5px rgba(0,0,0,.6);  
    }