CSS实现div固定在页面底部且不遮挡其他div内容

position: fixed; bottom: 0 会让蓝色盒子脱离标准文档流，不占据页面布局空间，以悬浮层的形式固定在视口底部。当手风琴内容总高度超过视口可用高度、页面产生滚动时，悬浮的蓝色盒子就会覆盖在手风琴下部内容上方，导致组件无法操作。

根据你需要的交互逻辑选择对应方案即可：

方案1：适配预期效果（内容不足一屏时盒子贴视口底，内容超屏时盒子在内容最末端） #

这个是经典的粘性页脚实现，不需要使用fixed定位，通过flex布局即可零遮挡实现需求：

<!DOCTYPE html>
<html lang="zh-CN">
<style>
/* 清除浏览器默认边距，统一盒模型 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  /* 让页面根节点最小高度占满整个视口 */
  min-height: 100vh;
}
body {
  /* 用纵向flex布局排列两个区块 */
  display: flex;
  flex-direction: column;
}
.accordion {
  /* 手风琴区域自动占满除底部盒子外的所有剩余空间 */
  flex: 1;
  padding: 16px;
}
.blue-box {
  /* 不需要定位，自然排列在flex布局末尾 */
  width: 100%;
  height: 60px;
  background: #2563eb;
}
</style>
<body>
  <div class="accordion">手风琴折叠组件区域</div>
  <div class="blue-box">底部蓝色盒子</div>
</body>
</html>

实现效果：

• 手风琴条目少、页面总高度不足一屏：蓝色盒子自动贴在视口底部，和原有fixed定位的视觉效果完全一致
• 手风琴条目多、页面总高度超过一屏：蓝色盒子跟随正常文档流排列在所有内容的最下方，页面滚动到底部才会显示，完全不会遮挡手风琴内容

方案2：要求蓝色盒子始终悬浮固定在视口底部 #

如果业务要求蓝色盒子一直固定在屏幕底部、不随页面滚动，只需要给手风琴容器增加对应高度的底部内边距，提前把被遮挡的区域空出来即可：

<!DOCTYPE html>
<html lang="zh-CN">
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.accordion {
  padding: 16px;
  /* 蓝色盒子高度为60px，额外加16px的安全边距，共76px底部内边距留空 */
  padding-bottom: 76px;
}
.blue-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #2563eb;
}
</style>
<body>
  <div class="accordion">手风琴折叠组件区域</div>
  <div class="blue-box">底部固定蓝色盒子</div>
</body>
</html>

提示：如果蓝色盒子高度是动态变化的，也可以通过JS获取蓝色盒子的实际高度，动态给手风琴容器赋值底部内边距即可。

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