如何将Side Bar菜单中的Logout按钮固定到侧边栏底部

不需要修改现有HTML结构和交互JS，仅调整CSS样式即可实现效果，适配性强，后续调整侧边栏头部内容也不需要重新改样式：

• 核心原理是用Flex弹性布局自动分配侧边栏垂直方向的剩余空间，把Logout按钮固定推到容器最底部

具体修改步骤 #

1. 调整侧边栏最外层容器样式
   找到#sidebar-wrapper的样式规则，修改/新增以下属性：

#sidebar-wrapper{
    z-index: 1;
    position: absolute;
    width: 0px;
    height: 100%;
    background: #1c1c1c;
    /* 原overflow-y: hidden可替换为auto，菜单项过多时自动出滚动条 */
    overflow-y: auto;
    /* 新增以下3行，开启纵向弹性布局 */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

2. 调整侧边栏导航容器样式
   找到.sidebar-nav的样式规则，替换为以下代码：

.sidebar-nav{
    padding: 0;
    margin-top: 15px;
    list-style: none;
    /* 新增两行：自动占满头部标题之外的剩余高度，开启内部纵向弹性布局 */
    flex: 1;
    display: flex;
    flex-direction: column;
}

注意：删除你之前在head内联样式里给.sidebar-nav写的height:100%，避免和弹性布局规则冲突导致位置偏移。

3. 新增Logout按钮定位规则
   添加以下CSS代码，自动占满导航栏剩余的上部空间，把Logout固定在底部：

.sidebar-nav li:last-child {
    margin-top: auto;
}

效果说明 #

• 侧边栏收起、展开的原有动画效果完全不受影响
• 无论后续增加多少个顶部菜单项、修改顶部标题的字号/内容，Logout按钮都会始终贴在侧边栏最底部
• 菜单项过多时侧边栏会自动出现滚动条，滚动时Logout按钮始终固定在可视区域底部

内容的提问来源于stack exchange，提问作者Rafael MR