html - 在侧边栏中获取固定的 div 元素

Question

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

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

我不知道如何获得侧边栏底部的 .navfooter。它总是在 .test 容器下。我尝试了几件事，但没有成功

这些是它的样式

<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

您是否尝试过将 .navfooter 更改为绝对？

.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);  
    }