css 上中下布局，上下固定100px,中间随屏幕大小，当中间超出时滚动，上下位置不动

。可以使用flex布局实现上下固定，中间滚动的布局。

HTML结构：

```html

<div class="container">

  <div class="header">Header</div>

  <div class="content">

    <div class="scroll-wrapper">

      <div class="scroll-content">

        <!-- 中间滚动内容 -->

      </div>

    </div>

  </div>

  <div class="footer">Footer</div>

</div>

```

CSS样式：

```css

.container {

  display: flex;

  flex-direction: column;

  height: 100%;

}

.header {

  height: 50px;

  background-color: #ccc;

}

.content {

  flex: 1;

  overflow: hidden;

  position: relative;

}

.scroll-wrapper {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  overflow-y: auto;

}

.scroll-content {

  height: 100%;

  padding: 20px;

}

```

解释：

- `.container`：容器使用flex布局，设置高度为100%。

- `.header`：固定在顶部，设置高度和背景色。

- `.content`：中间内容区域使用flex的`flex: 1`占据剩余空间，设置`overflow: hidden`隐藏滚动条。

- `.scroll-wrapper`：使用绝对定位撑满整个中间内容区域，设置`overflow-y: auto`显示纵向滚动条。

- `.scroll-content`：滚动内容区域，设置高度为100%占据滚动容器的高度，设置padding留出空白区域。