如何在固定侧边栏div的底部添加始终固定展示的标签元素

实现方案 #

我们可以通过弹性盒布局实现需求，改动量很小：

1. HTML结构调整 #

在侧边栏内新增导航容器包裹原有菜单项，同时添加底部固定元素：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div class="sidebar">
      <!-- 新增导航容器包裹原有菜单项 -->
      <div class="sidebar-nav">
        <a class="active" href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
      </div>
      <!-- 新增底部固定元素 -->
      <div class="sidebar-footer">
        <a href="#profile">个人资料</a>
      </div>
    </div>
    <div class="content">
      Dummy
    </div>
  </body>
</html>

2. CSS样式调整 #

修改侧边栏为弹性布局，让导航容器自动填充剩余空间，把底部元素挤到最下方：

body {
  margin: 0;
  font-family: "Lato", sans-serif;
}

.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
  /* 新增以下两行 */
  display: flex;
  flex-direction: column;
}

/* 新增导航容器样式 */
.sidebar-nav {
  flex-grow: 1;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

.sidebar a.active {
  background-color: #04AA6D;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

/* 新增底部元素样式，可根据需求自定义 */
.sidebar-footer {
  border-top: 1px solid #ddd;
}

div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}

可选：侧边栏滚动时底部元素始终固定在可视区域底部 #

如果需要不管侧边栏导航内容有多少、滚动时底部元素始终停在侧边栏可视区域的最下方，可以把弹性方案替换为绝对定位方案，不用加导航容器，直接给底部元素加样式即可：

.sidebar-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #f1f1f1;
  border-top: 1px solid #ddd;
}
/* 同时需要给侧边栏加底部内边距，避免导航内容滚动到底被底部元素遮挡 */
.sidebar {
  padding-bottom: 54px; /* 高度和底部元素高度一致即可 */
}

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