如何实现上下两个固定高度的盒子中间撑满整个屏幕

可以使用绝对定位和计算高度的方式来实现上下两个固定高度的盒子中间撑满整个屏幕：

1. 设置上下两个盒子的高度和固定定位，比如上面的盒子高度为100px，下面的盒子高度为200px，并且它们的position属性都设置为fixed。

2. 设置一个中间的盒子，作为撑满整个屏幕的容器。可以使用绝对定位，并设置top、bottom、left、right都为0，这样它就会占据整个屏幕。

3. 计算中间盒子的高度：屏幕高度 - 上面盒子的高度 - 下面盒子的高度。可以使用JavaScript获取屏幕高度，然后计算出中间盒子的高度，并设置它的高度为计算出来的值。

下面是一个示例代码：

HTML代码：

<div class="top-box"></div>
<div class="middle-box"></div>
<div class="bottom-box"></div>

CSS样式：

.top-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background-color: #ccc;
}

.middle-box {
  position: absolute;
  top: 100px;
  bottom: 200px;
  left: 0;
  right: 0;
  background-color: #f2f2f2;
}

.bottom-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background-color: #ccc;
}

JavaScript代码：

var screenHeight = window.innerHeight;
var topBoxHeight = document.querySelector('.top-box').offsetHeight;
var bottomBoxHeight = document.querySelector('.bottom-box').offsetHeight;
var middleBoxHeight = screenHeight - topBoxHeight - bottomBoxHeight;
document.querySelector('.middle-box').style.height = middleBoxHeight + 'px';

注意：在计算中间盒子的高度时，需要注意浏览器窗口大小发生变化时要重新计算。可以在窗口大小改变时触发计算中间盒子高度的函数。