如何实现导航抽屉底部logo固定且滚动时不覆盖内容？

问题背景 #

需要在导航抽屉（nav drawer）中放置Logo，同时满足两种显示规则：

• 抽屉内容高度不足时，Logo默认贴靠在抽屉底部
• 窗口/设备高度较小，抽屉内容超出高度触发滚动条时，Logo作为可滚动内容的一部分跟随内容滚动，不覆盖上方列表项

原有实现采用position: absolute搭配bottom属性固定Logo位置，出现滚动条时会出现Logo覆盖列表项的问题；移除绝对定位后，Logo会紧贴最后一个列表项下方，无法在内容高度不足时贴靠抽屉底部，多次调整flex属性未达到预期效果。

原有Logo样式代码 #

.logo {
  width: "220px",
  height: "150px",
  marginLeft: "50px",
  marginRight: "50px",
  bottom: "24px",
  position: "absolute"
}

实现方案 #

纯CSS通过Flex布局即可实现需求，不需要依赖JavaScript，也不需要绝对定位：

1. 给导航抽屉的滚动容器设置基础样式，将其改为纵向Flex容器：

.drawer-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

2. 给上方列表项的包裹容器设置不压缩规则，避免内容被挤压变形：

.drawer-list-wrapper {
  flex-shrink: 0;
}

3. 修改Logo样式，移除绝对定位相关属性，通过margin-top: auto实现内容不足时的底部贴靠效果：

.logo {
  width: 220px;
  height: 150px;
  margin: auto 50px 24px;
  flex-shrink: 0;
}

实现原理 #

• 当抽屉内列表总高度小于抽屉本身高度时，Logo上的margin-top: auto会自动填充列表和Logo之间的剩余空间，把Logo推到抽屉底部，保留24px的底部间距
• 当列表总高度超过抽屉本身高度时，Flex容器会被内容撑开，此时margin-top: auto计算值为0，Logo会自然跟在列表最后方，跟随容器滚动条一起滚动，不会出现覆盖列表项的问题

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