如何将Déconnexion按钮固定在侧边栏底部且适配任意屏幕尺寸

推荐使用Flexbox布局实现，兼容性好，适配所有屏幕尺寸，无需担心内容重叠：

第一步：给侧边栏添加Flex布局属性 #

给.sidebar类新增如下样式，原有样式（宽度、背景色、内边距等）可直接保留：

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 保证侧边栏最少占满整个浏览器视口高度 */
  box-sizing: border-box; /* 避免内边距撑高容器导致出现多余纵向滚动条 */
}

第二步：给登出项添加自动上外边距 #

给.sign-out类新增如下样式，原有样式可直接保留：

.sign-out {
  margin-top: auto;
}

margin-top: auto会自动占用flex容器内的所有剩余纵向空间，自动把登出项推到侧边栏最底部，无论上方的导航项有多少、屏幕高度是多少，位置都固定。

如果项目有兼容极旧浏览器的需求，可使用绝对定位实现，但需要注意预留底部空间避免内容重叠：

.sidebar {
  position: relative;
  min-height: 100vh;
  padding-bottom: 60px; /* 数值需要大于登出项的高度，避免上方内容和登出项重叠 */
  box-sizing: border-box;
}

.sign-out {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

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