两个div盒子一个可以滑动 另一个固定在最下方有几种实现方式

有多种实现方式可以实现这个需求，以下是几种常见的方法：

1. 使用CSS的`position: fixed`和`bottom`属性。将固定在最下方的`div`设置为`position: fixed`，并通过设置`bottom: 0`使其固定在底部。另一个可滑动的`div`则可以使用默认的滚动行为，不需要额外的CSS样式。

<div class="scrollable-div">
  <!-- 可滑动的内容 -->
</div>

<div class="fixed-div">
  <!-- 固定在最下方的内容 -->
</div>

.fixed-div {
  position: fixed;
  bottom: 0;
}

2. 使用CSS的Flexbox布局。使用Flexbox布局可以更方便地实现这个需求。将外部容器设置为Flexbox布局，并将其方向设置为`column`，然后使用`flex-grow`属性将可滑动的`div`的高度设置为剩余空间的倍数，将固定在最下方的`div`设置为固定高度。

<div class="flex-container">
  <div class="scrollable-div">
    <!-- 可滑动的内容 -->
  </div>
  
  <div class="fixed-div">
    <!-- 固定在最下方的内容 -->
  </div>
</div>

.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置高度以确保撑满整个视口 */
}

.scrollable-div {
  flex-grow: 1; /* 占据剩余空间 */
  overflow-y: scroll; /* 添加滚动条 */
}

.fixed-div {
  height: 100px; /* 固定高度 */
}

3. 使用JavaScript动态计算高度。利用JavaScript可以动态计算可滑动的`div`的高度，使其占据剩余空间，而固定在最下方的`div`则设置为固定高度。

<div class="scrollable-div" id="scrollableDiv">
  <!-- 可滑动的内容 -->
</div>

<div class="fixed-div">
  <!-- 固定在最下方的内容 -->
</div>

.fixed-div {
  height: 100px; /* 固定高度 */
}

var scrollableDiv = document.getElementById('scrollableDiv');
var fixedDiv = document.querySelector('.fixed-div');
var windowHeight = window.innerHeight;

scrollableDiv.style.height = (windowHeight - fixedDiv.offsetHeight) + "px";

这些是几种常见的实现方式，具体选择哪种方式取决于你的需求和项目的具体情况。