如何避免滚动容器内#list元素滚动到底部时与#menu重叠？

你提到不想通过给#list的最后一个div设置margin-bottom来解决滚动到底部时#menu与列表元素重叠的问题，以下是几种可行的替代实现方式：

方法1：调整#list的高度，避开#menu区域 #

利用calc()计算#list的高度，直接减去#menu的高度，让#list的滚动区域天然不与#menu重叠，不需要额外的内边距或外边距。

修改后的CSS：

#home {
  width: 200px;
  height: 300px;
  position: fixed;
  background: blue;
  overflow: hidden;
}

#list {
  width: 100%;
  /* 减去menu的高度50px，避免滚动区域与menu重叠 */
  height: calc(100% - 50px);
  background: green;
  overflow-y: scroll;
}

#list div {
  width: 100%;
  height: 150px;
  background: gray;
  margin-bottom: 20px;
}

#menu {
  position: absolute;
  bottom: 0px;
  background: rgb(255 0 0 / 20%);
  width: 100%;
  height: 50px;
  z-index: 1;
}

方法2：给#list添加底部内边距并配合box-sizing: border-box #

通过给#list设置与#menu等高的底部内边距，让滚动内容的底部留出足够空间，同时用border-box确保内边距不会超出#home的范围。

修改后的CSS：

#home {
  width: 200px;
  height: 300px;
  position: fixed;
  background: blue;
  overflow: hidden;
}

#list {
  width: 100%;
  height: 100%;
  background: green;
  overflow-y: scroll;
  /* 设置与menu高度一致的底部内边距，给滚动内容留足底部空间 */
  padding-bottom: 50px;
  /* 让padding包含在元素高度内，避免超出home容器 */
  box-sizing: border-box;
}

#list div {
  width: 100%;
  height: 150px;
  background: gray;
  margin-bottom: 20px;
}

#menu {
  position: absolute;
  bottom: 0px;
  background: rgb(255 0 0 / 20%);
  width: 100%;
  height: 50px;
  z-index: 1;
}

方法3：使用伪元素作为底部占位 #

给#list添加::after伪元素，设置与#menu等高的高度，模拟最后一个元素的底部间距，无需修改现有列表结构。

修改后的CSS：

#home {
  width: 200px;
  height: 300px;
  position: fixed;
  background: blue;
  overflow: hidden;
}

#list {
  width: 100%;
  height: 100%;
  background: green;
  overflow-y: scroll;
}

#list div {
  width: 100%;
  height: 150px;
  background: gray;
  margin-bottom: 20px;
}

/* 添加伪元素作为底部占位，高度与menu一致 */
#list::after {
  content: "";
  display: block;
  height: 50px;
  margin-bottom: 0;
}

#menu {
  position: absolute;
  bottom: 0px;
  background: rgb(255 0 0 / 20%);
  width: 100%;
  height: 50px;
  z-index: 1;
}

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