侧边栏固定底部

Question

我现在正在使用自定义管理模板，我在这里遇到了一个小问题。我在左侧边栏的底部有两个名为 .logout 的列表点。问题是，如果我放大它，它们会向上移动并覆盖其他菜单点，但我希望它们位于它的底部

.footer {
    bottom: 0px;
    clear: both;
    display: block;
    left: 0;
    padding: 0;
    position: fixed;
}

这就是边栏页脚所具有的 css。

.offcanvas-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    visibility: hidden;
    background: #fff;
    padding: 10px 0px;
    border-right: 1px solid #CCC;
    width: 300px;
    height: 100%;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

这就是 offcanva 侧边栏的样式如果我给页脚一个 position relative 它将停靠在压延机 post 下方，而不是在底部了。 by position:absolute 我会再次遇到同样的问题

demo

Answer 1

在您的代码

中尝试以下css

#menu{
overflow:auto;
}

以下不需要css

.footer {
    bottom: 0px;
    clear: both;
    display: block;
    left: 0;
    padding: 0;
}

Answer 2

试试这个：

.sidebar-menu.footer {
  bottom: 0;
  width: 100%;
  position: absolute;
}

侧边栏固定底部

Fixed bottom in sidebar

html

css

footer