如何实现购物车建议框始终固定在底部且不覆盖商品列表？

要实现粉色建议框始终位于底部，且不覆盖商品、随商品列表下移的需求，最简洁的方式是利用Flexbox布局来实现，以下是具体修改方案：

核心思路 #

通过Flexbox的弹性布局特性，让商品列表区域自动占据容器剩余空间：当商品数量较少时，将建议框推至容器底部；当商品数量较多超出容器高度时，整个容器可滚动，建议框自然跟随列表移动到内容底部。

修改后的代码 #

CSS部分 #

#wrapper {
  text-align: center;
  margin: 0;
  font-weight: 300;
  border: 1px solid #000;
  height: 100%;
  background-color: #FFFFFF;
  color: #000433;
  font-size: 16px;
  font-style: normal;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  right: 50px;
  top: 0px;
  width: 450px;
  /* 添加Flex垂直布局 */
  display: flex;
  flex-direction: column;
  /* 移除无用的float定位，fixed已生效 */
}

#scroller {
  /* 确保内容少时撑满容器高度 */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}

#list-wrapper {
  /* 自动占据容器剩余空间 */
  flex-grow: 1;
}

/* 将商品项改为class，支持多元素 */
.green-item {
  height: 250px;
  width: 410px;
  background-color: green;
  margin: 20px;
}

#pink {
  height: 250px;
  width: 100%;
  background-color: pink;
  /* 关键：自动margin将自身推至底部 */
  margin-top: auto;
}

HTML部分 #

<div id="wrapper">
  <div id="scroller">
    <div id="list-wrapper">
      <div class="green-item">Item should scroll</div>
      <!-- 可取消注释添加更多商品项测试 -->
      <!-- <div class="green-item">Item should scroll</div> -->
      <!-- <div class="green-item">Item should scroll</div> -->
      <!-- <div class="green-item">Item should scroll</div> -->
    </div>
    <div id="pink">Pink<br>Stays on bottom and not covering up items on the list.</div>
  </div>
</div>

关键修改点说明 #

1. 容器Flex布局：给#wrapper和#scroller设置垂直方向的Flex布局，让内部元素弹性排列。
2. 商品列表自动扩展：#list-wrapper设置flex-grow: 1，自动占据容器中除建议框外的所有剩余空间，确保商品少时建议框被推至底部。
3. 建议框自动居底：#pink设置margin-top: auto，利用Flexbox的自动margin特性，无论商品数量多少，都会自动定位到内容底部。
4. 修复重复ID问题：将商品项的id="green"改为class="green-item"，符合HTML规范，支持多个商品项。

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